【jQuery】最後の要素だけ処理を適用しない

roop

例えば、リストの数が不確定で、常にその最後にだけには処理したくない場合。
CSSで処理するならばselector:last-childというのがありますし、
jQueryでも同じセレクタが使えるのですが、別にDOMをいじったりしたい場合などは、どうするか。

jQueryのeach処理を使って実現できましたのでメモ書き的に記しておきます。


やってみよう


処理前のhtmlはこんな感じ。これに「★」を追加していきます。
最後のリストだけには例外処理します。

html

<!--処理前-->
<ul class="sample">
    <li>1番めです</li>
    <li>2番めです</li>
    <li>3番めです</li>
    <li>4番めです</li>
</ul>

jQueryで処理。

javascript

var elements = $('sample').find('li');

    elements .each(function(i) {
        i = i+1; //ここでsizeとiの数値のずれを修正しておく
        if( i != elements .size()){ //iがelementsの数と同じでなかったら
            $(this).after('<span>★</span>');
        }
    });

html

<!--処理後-->
<ul class="sample">
    <li>1番めです<span>★</span></li>
    <li>2番めです<span>★</span></li>
    <li>3番めです<span>★</span></li>
    <li>4番めです</li>
</ul>

狙い通りになりました。

コメントを残す

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

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