如何使用 jQuery 选择多个子元素？

Question

这里完全是 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 标签内。

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

谢谢！

Answer 1

您可以使用 .each 方法迭代匹配的 < 集合code>.caption 元素，以及 prev 来访问紧邻前面的元素（在您的情况下是 a ）：

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

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

Answer 2

您可以稍微翻转一下逻辑并使用 append()。

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

jsFiddle。

我发现这更容易阅读自己，但是 YMMV。

Answer 3

$('.caption').each(function(){$(this).prev().append($(this))});