jQueryで複数あるUL要素の最後のLI要素以外を処理したい

質問

jQueryで複数あるUL要素の最後のLI要素以外を処理したい

現在、HTMLを

<ul>
<li>foo</li>
<li>bar</li>
<li>com</li>
</ul>
<ul>
<li>foo</li>
<li>bar</li>
<li>com</li>（※）
</ul>

上記のように記述しています。

今回、jQueryを使い、2カ所あるUL要素の最後のLI要素以外を処理したいと思い、

$(function(){
$("ul li:not(:last)").css("～","～");
});

以上のようにjQueryを記述したところ、1カ所目の最後のLI要素は無視されCSSが追加されてしまいました。
1カ所目・2カ所目とも同じように処理するにはどうしたら良いでしょうか？

ご指導・ご鞭撻のほど、よろしくお願いします。

回答No.1

mtaka2 · ベストアンサー

---ここから---
$(function(){
$("ul").each(function(index, elem) {
$("li:not(:last)", $(elem)).css("～", "～");
});
});
---ここまで---

でいけると思います。
引数を二つしているする「$(A,B)」という形式では、
B要素の下から、Aの条件にマッチする要素を抽出します。

そこで、個々のul要素に対してeach でループを回してそれを第二引数に指定すれば、
「そのul要素の下」にある要素の中で「最後のを除くli要素」を抽出できることになります。

お礼

ご回答ありがとうございます。
eachまではなんとか理解できていたのですがその後にご教授いただいた記述まではわかりませんでした。
少し冗長化の気もしますがこちらのほうがより的確な指定方法になるのかと思います。
またご丁寧な解説にも感謝しております。
ほかの要素でも適用できそうなので癖をつけるためにもご教授いただいた方法で実現したいと思います。
この度はありがとうございました。

回答No.2

fujillin

jqueryはよく知りませんが…

:lastは要素集合の最後（選択されたもののうち最後の一つ）を意味するので、ご質問文のような動作になります。
これに対して、:last-childは要素集合のうち「親要素の最後の子要素」の集合を意味しますので、

　$("ul li:not(:last-child)").css("～","～");

のように記述すれば、目的に合った指定になるのではないでしょうか？

お礼

ご回答ありがとうございます。
:last-childの指定方法があることをすっかり忘れていました。
なるほど、こちらでも実現できますね。
良い勉強になりました。
ありがとうございました。