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

shelf

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



やってみよう


元の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>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>