导航到jQuery中的DOM元素并分配给变量

Question

我正在开发一个WordPress主题，并在代码中构建了Fancybox灯箱插件。除了一个小问题外，这一切都很好。

但我会先给你看代码，这样更容易解释。

<dl class='gallery-item'>
<dt class='gallery-icon'>
<a href='image.jpg' title='something'><img width="150" height="150" src="image.jpg" class="attachment-thumbnail" title="something" /></a>
</dt>
<dd class='wp-caption-text gallery-caption'>
Description, that should be displayed as title...
</dd>
</dl>

这是WordPress标准库的一个库项目的输出。我想做的是，将dd标签中的描述附加到灯箱图像标题上(此时显示的是a标签的标题，这是一个字母数字字符串，用户不太友好)。

为了给灯箱标题分配一些内容，必须在灯箱的初始化函数中调用以下javascript。(此代码实际上将第一个.wp标题文本元素的内容分配给每个图像标题。)

$(document).ready(function(){
$("a[href$='.jpg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox({
beforeLoad: function(){
var caption = $('.wp-caption-text').html();
this.title = caption;
}
});
});

上面的代码按预期工作，但这意味着，只有类为wp caption text的第一个元素将被分配给灯箱和每个图像。但我只想获得图像的相应wp标题文本，该文本已在灯箱中打开。因此，我必须使用类似$(this)的东西，然后导航到相应的wp标题文本，并将文本分配给标题变量。

我正在为最后一点而挣扎，希望你能帮助我。这应该不会太难，但我现在不知道。

感谢
卢卡斯

Answer 1

如果标记发生更改，这将是稳定的。如果这不起作用，那就意味着this并不是我们期望的那样，我们需要弄清楚它是什么。还要注意，我使用的是.text()而不是.html()。如果您决定在.wp-capition-text中添加一些标记(例如，图标或其他什么)，这仍然只是获取文本。

var caption = $(this.element).closest('.gallery-item').find('.wp-caption-text').text();

Answer 2

试试这个

var caption =  $(this).parent().parent().find('.wp-caption-text').html();

如果该对应于当前锚点