liの並び順の変更

質問

javascriptを使用してliの並び順の変更を考えています。

例)
<ul class="c">
<li class="a">りんご</li>
<li class="a">バナナ</li>
<li class="b">トマト</li>
<li class="a">カキ</li>
</ul>

上記の様に複数のclassがaのliと1つだけのclassがbのliがあります。
class="b"が最後ではなかった場合、最後のliとその一個前のclass="b"のliを交換したいと考えています。

class="b"にはイベントが指定してありますので、削除して作り直しはできません。

この場合、最後の二つを入れ替えるロジックが良く分かりません。
javascriptコードでも、jqueryライブラリを使用してもどちらでも構いません。

if($(".c").find("li").filter(":last").attr('class') != 'b')
でbかどうかの判定はできそうですが、その後の入れ替えが良く分かりません。

<ul class="c">
<li class="a">りんご</li>
<li class="a">バナナ</li>
<li class="a">カキ</li>
<li class="b">トマト</li>
</ul>

とするにはどうすればいいでしょうか？
よろしくお願いいたします。

回答No.2

think49 · ベストアンサー

要素を移動するだけなら appendChild() で期待通りに動作するのではないでしょうか。
http://jsfiddle.net/0dzsqj1v/

---
document.querySelector('.b').addEventListener('click', function (event) { console.log(event.type); }, false);
document.querySelector('.c').appendChild(document.querySelector('.b'));
---

お礼

サンプルプログラムまでわざわざ、ありがとうございます。
参考にいたします。

回答No.1

Taiyonoshizuku

class="b"が最後に来ればいいんだよね。

<li class="b">のクローン作って元のを削除してulにappendじゃだめなの？
clone(true)でイベント引き継げると思うけど

お礼

イベント引き継げる方法があることを分かっていませんでした。
clone(true)の使用で何とかなりそうです。
ありがとうございました！