繰り返す要素ごとに特定要素を繰り返す

Question

繰り返す要素ごとに特定要素を繰り返したいです。

具体的には、以下の構成で、繰り返す「hoge」ごとの「.li01」「.li02」を「.li04」の後ろに移動したいです。

変更前

<div class="hoge">
<ul>
<li class="li01">........</li>
<li class="li02">........</li>
<li class="li03">........</li>
<li class="li04">........</li>
</ul>
</div>

▼繰り返し

変更後

<div class="hoge">
<ul>
<li class="li03">........</li>
<li class="li04">........</li>
<li class="li01">........</li>
<li class="li02">........</li>
</ul>
</div>

▼繰り返し

eachメソッドを使用すると思うのですが、よく理解していないためご教授のほどよろしくお願いいたします。

Answer 1

こんな感じでいかがでしょう？

$('.hoge').each(function() {
    var $hoge = $(this);
    var $ul = $hoge.children('ul');
    $hoge.find('.li01').appendTo($ul);
    $hoge.find('.li02').appendTo($ul);
});

Comments

[castail]

ご回答ありがとうございました。
ご指示頂いた内容で実現できました！
感謝致します。