如何使用 <figcaption> jquery 调用并插入<a>到标签中

Question

我正在尝试调用元素中包含的内容并将其插入标记中，以便它可以用作灯箱的标题。

html看起来像:

<figure class="image">
    <img alt="sadasdasd" src="http://i.telegraph.co.uk/multimedia/archive/02580/japan-train_2580841k.jpg" />
    <figcaption>adsasdsa</figcaption>
</figure>

我使用的jQuery如下:

$('#article-copy img').each( function() {
    var $img = $(this),
    caption = $("figcaption"),
    href = $img.attr('src');
    $img.wrap('<a href="' + href + '" class="fresco" data-fresco-group="unique_name" data-fresco-caption="' + caption + '"></a>');
});

谢谢你的帮助。

Answer 1

当你点击img元素时，你会得到它，所以你会得到要使用的href。但是，您无法到达图标题，因为它不在img元素上。它是兄弟元素。我们可以使用next

$img.next('figcaption').text();

，但还有其他函数，如find，你可能更喜欢使用。你可以在jQuery树遍历api文档中看到你的选项。使用next()可以得到:

$('#article-copy img').each( function() {
    var $img = $(this),
    caption = $img.next('figcaption').text(),
    href = $img.attr('src');
    $img.wrap('<a href="' + href + '" class="fresco" data-fresco-group="unique_name" data-fresco-caption="' + caption + '"></a>');
});