jQuery 要素を移動する方法

質問

以下のHTMLで<div class="target">ホゲ</div>を
自身の親要素の兄弟である
<div class="header">内の一番後ろに移動する方法を知りたいです。（★の部分です）
ちなみにこの型は2つだけでなく、10個とかあります。

jQuery(".target").each(function(){
jQuery(this)～
});
みたいな感じで簡単にいけるかなと思って甘くみていたら、うまくいかず、
この方法だとできない気がしてきてお尋ねしている次第です。

<div class="header">新規 Div タグの内容がここに入ります★</div>
<div class="aaaa">
<div class="bbbbb">
<div class="contents">
<div class="target">ホゲ</div>
</div>
</div>
</div>

<div class="header">新規 Div タグの内容がここに入ります★</div>
<div class="cccc">
<div class="dddd">
<div class="contents">
<div class="target">ホゲ</div>
</div>
</div>
</div>

よろしくお願いいたします。

回答No.1

sanzero · ベストアンサー

こんな感じでしょうか。出来なくはないけど処理の意図はハテナです。

$(function(){
//キャッシュする
var $el = $('.target');
// 元あるやつは削除
$('.target').remove();
// headerクラスと同じ番目のtargetクラスをheaderクラス内に記述
$('.header').each(function(index){
$(this).html($el.eq(index).prop('outerHTML'));
});
});

補足

ありがとうございます！
おかげさまで目的の表現が再現できました。
が、ご提供いただいたコードを見て
発想が凝り固まっている自分を感じました。
キャッシュして消してなんて考えもつきません。。

恥ずかしながらOuterHTMLというの使った事がなかったので
調べてみたのですが、なんのことなのかよくわかりませんでした。
今回のケースですとキャッシュした.targetのhtmlコードを指していると思うですが、
そのHTMLコードを取り出す場合は、OuterHTMLを使うのがスタンダードなのでしょうか。

回答No.2

sanzero

'移動'とありましたので、divごとと理解しました。

で、いつもは$(セレクタ)[0]などとしてHTML文字列を取得しているのですが今回はうまくいかなくて検索したところ、そういう方法が見つかった次第です。

タグの中身を取得するtextとかhtmlのほうがよく使いますね。

お礼

遅くなりましたが、この度は大変為になりました。
またの機会にはどうぞよろしくお願いします。