web-dev-qa-db-ja.com

JQuery-最後のすべてのリストアイテムにクラスを追加するにはどうすればよいですか？

ここで機能していないコードを取得しました：

$("#sidebar ul li:last").each(function(){
      $(this).addClass("last");
});

基本的に私は3つのリストを持っており、順序付けされていない各リストの最後に表示される各アイテムにクラス（最後）を追加したいと思います。

<ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li class="last">Item 3</li>
</ul>

それが理にかなっていることを願っています、乾杯！

jquerycssclasseach
15
Keith Donegan

簡単な間違い。これを試して：

$("#sidebar ul li:last-child").addClass("last");

基本的に：lastはあなたが思っていることを完全には行いません。各リストの最後ではなく、ドキュメントの最後にのみ一致します。それが：last-childの目的です。

36
cletus

jqueryでこれを追加

$("ul li").last().addClass('last');
4
Ayham

動作しない理由は、:lastが1つの要素にのみ一致するためです。 jQueryのドキュメントから：

最後に選択した要素に一致します。

つまり、コードが実行しているのは、<li>内のすべての<ul>要素のセットを取得し、そのセットから最後の値を取得することです。例：

 <ul>
   <li>1</li>
   <li>2</li>
 </ul>
 <ul>
   <li>3</li>
   <li>4</li>
 </ul>
 <ul>
   <li>5</li>
   <li>6</li>
 </ul>

あなたのコードは要素<li>6</li>を返します。 （内部的には、<li>1</li>を<li>6</li>に収集し、最後の1つを削除して返します）。

あなたが探しているのは、ここでの他の答えが言っていることです：:last-child。

3
cdmckay

または、リストにIDを指定して、それをjquery-callのコンテキストとして使用することもできます。

<ul id="myList">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

<ul id="anotherList">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

そして、あなたはすることができます：

jQuery("li:last", "ul#myList").addClass("lastItem");

これで、最初のリストの最後のliのクラスは「lastItem」になります。

編集：申し訳ありませんが、質問を読み間違えました。これは無視してください。

0
Cursed

3つの別々のリストにクラスを追加する必要がある場合は、それらにクラスを割り当てて、「each」を使用できます。

$('#sidebar ul.class li:last-child').each(function(e){
    $(this).addClass("last");
});

これは、期待どおりに機能するはずです。

0
Burning