【jQuery】リストの順番を入れ替える

需要あるかなー。
何か要素の順番を入れ替えるスクリプト書きました。
ボタン押したら入れ替わるとか、いつか使うかもしれん。

やってみよう

元のHTMLはこんな感じ。

html

<!--元のHTML-->
<ul>
<li>1番目</li>
<li>2番目</li>
<li>3番目</li>
<li>4番目</li>
<li>5番目</li>
<li>6番目</li>
<li>7番目</li>
</ul>

jQuery書きます。

javascript

$(function(){
    //get()で配列を返して、reverse()で入れ替え
    var lis = $('ul li').get().reverse();
    //元のリストを空に
    $('ul').empty();
    //配列の中身を順番にappend
    $.each(lis, function(i){
        $('ul').append('<li>'+ lis[i].innerHTML + '</li>');
    });
});

処理結果はこんな感じ。

html

<!--jQuery処理後-->
<ul>
<li>7番目</li>
<li>6番目</li>
<li>5番目</li>
<li>4番目</li>
<li>3番目</li>
<li>2番目</li>
<li>1番目</li>
</ul>