jquery - 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))});