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 回答日時： 2010/07/06 09:33

---ここから---

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

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

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

この回答へのお礼

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

お礼日時：2010/07/06 22:05

No.2 回答者： fujillin 回答日時： 2010/07/06 10:59

jqueryはよく知りませんが…

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

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

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

この回答へのお礼

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

お礼日時：2010/07/06 22:01