4

私はこのHTMLを持っています:

<ul class="how-long">
    <li value="1">Any</li>
    <li value="1">1 day</li>
    <li value="2">Week end</li>
    <li value="7">1 Week</li>
    <li value="14">2 Week</li>
    <li value="21">3 Week</li>
</ul>

ドキュメントの準備ができたら、4 番目の li 要素に新しいクラスを追加します。

これは私が試したものです：

$(".how-long li").slice(3).addClass('change-color');

アラートを次のように設定した場合：

alert($(".how-long li").slice(3).html());

それは私に 1週間を与えますが、私がクラスを追加すると、クラスは4番目のliの後にすべてのliに追加されます。

各 li 要素にID を追加せずにこれを行います。li 要素にクラスを直接ハードコーディングできますが、jQuery を使用して動的に実行したいと考えています。

4

7 に答える 7

13

1 つのセレクターで行うには、nth-childまたはを使用しeqます。

nth-childここで私のjsPerfを参照してください：http://jsperf.com/nth-child-vs-eq

jsperf

nth-child:

$(".how-long li:nth-child(4)").addClass('change-color');

eq:

$(".how-long li:eq(3)").addClass('change-color');

基本的な違いは、(現在のアイテムの子であるかどうかに関係なく) そのクラスを持つすべてのアイテムnth-childの 4 番目の要素を提供するのに対して、現在のアイテムの子を提供することです。eq

于 2013-03-05T12:18:13.653 に答える
9 
$(".how-long li").eq(3).addClass('change-color');
于 2013-03-05T12:17:10.153 に答える
2

slice は jQuery オブジェクトを返さないため、メソッド addClass を使用できません。意図したことを行う正しい方法は次のとおりです。

索引別:

$(".how-long li").eq(3).addClass('change-color');

値を参照することにより：

$(".how-long li[value=7]").addClass('change-color');
于 2013-03-05T12:18:58.990 に答える
1

スライスメソッドを使用する場合は、欠落している終了属性を指定する必要があります

$(".how-long li").slice(3,4).addClass('change-color');
于 2013-03-05T12:21:19.970 に答える
0

配列インデックスが0から始まるので、4番目を選択します。

$('.how-long li:nth-child(4)'); はいつでも使用できます。

詳細はこちら: http://api.jquery.com/nth-child-selector/

于 2013-03-05T12:22:52.237 に答える
0

nth-child セレクターを使用できます。

 $(".how-long li:nth-child(4)").addClass('change-color');

 alert($(".how-long li:nth-child(4)").html());
于 2013-03-05T12:29:32.593 に答える
-1

こうすれば

$(".how-long li:nth-child(4)").attr({'class':'test'});

testこれにより、4番目のliにクラスが追加されます

これがうまくいくことを願っています

于 2013-03-05T12:20:15.233 に答える