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