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

Question

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

在：

 <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方法迭代匹配的.caption元素集，并使用prev来访问前一个元素（在您的情况下为a） ：

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

这是一个working example（用Firebug检查源代码以查看结果）

Answer 2

您可以稍微翻转逻辑并使用{​​{1}}。

append()

jsFiddle

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

Answer 3

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