Как выбрать несколько дочерних элементов с помощью 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 тега.

Я думаю, что мне нужно каким-то образом использовать селектор parent-child, но смущенный этим.

Спасибо!

Answer 1

Вы можете немного перевернуть свою логику и использовать append().

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

jsFiddle.

Мне это легче читать, но YMMV.

Answer 2

Вы можете использовать метод .each перебрать согласованный набор .caption элементов и prev для доступа к непосредственно предшествующему элементу (a в вашем случае):

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

Вот working example (инспектировать источник с Firebug, чтобы увидеть результат)

Answer 3

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