2

总 jQuery 新手在这里。使用这个示例 HTML，我想使用 jQuery 将每个 span.caption 移动到前面的 A 标记内。

前：

 <ul class="gallery">
 <li><a href="http://mysite.com/mural.jpg"><img src="mural.jpg"/></a>     
 <span class="caption">Nice mural</span>
 </li>
 <li><a href="http://mysite.com/car.jpg"><img src="car.jpg"/></a>     
 <span class="caption">New car</span>
 </li>
</ul>

期望的结果：

 <ul class="gallery">
 <li><a href="http://mysite.com/mural.jpg"><img src="mural.jpg"/>     
 <span class="caption">Nice mural</span></a>
 </li>
 <li><a href="http://mysite.com/car.jpg"><img src="car.jpg"/>     
 <span class="caption">New car</span></a>
 </li>
</ul>

我试过$('ul.gallery li span.caption').appendTo($('ul.gallery li a img'));了，但它选择了每个 span.caption 并将它们放置在第一个 img 标签内。

我想我需要以某种方式使用父子选择器，但对此感到困惑。

谢谢！

4

3 回答 3

4

您可以使用该.each方法迭代匹配的.caption元素集，并prev访问前一个元素（a在您的情况下）：

$(".caption").each(function() {
    var caption = $(this);
    caption.appendTo(caption.prev()); 
});

这是一个工作示例（使用 Firebug 检查源以查看结果）

于 2011-12-21T23:12:59.060 回答
3

您可以稍微翻转您的逻辑并使用append().

$('.gallery a').append(function() {
    return $(this).nextAll('.caption');
});

js小提琴。

我觉得这更容易阅读自己，但 YMMV。

于 2011-12-21T23:13:16.010 回答
0 
$('.caption').each(function(){$(this).prev().append($(this))});
于 2011-12-21T23:21:28.557 回答