15

特定のインデックスを持つコンテナに要素をクラスに追加するにはどうすればよいですか？

私は今これを試していますが、これは最初の要素に影響を与えるはずです（とにかく機能しません）

$('#resultsBox li:first-child').addClass('aaaa');

しかし、インデックスを持つコンテナ内の任意の要素のクラスを変更できるようにしたいと思います。

EGインデックス=2の要素を変更したい場合。

<div id="resultsBox">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>

次のようになります。

<div id="resultsBox">
<ul>
<li></li> // Index 0
<li></li> // Index 1
<li class="selected"></li> // Index 2
</ul>
</div>
4

5 に答える 5

35

:firstセレクターを使用:

$('#resultsBox li:first').addClass('aaaa');

3 番目の要素の選択には、each()メソッド を使用できます。これが jsFiddle です。

$('ul li').each(function(i) {
    if ( i === 2 ) {
       $(this).addClass('aaaa');
    }
});

または、前述の Jamiec & MrThys のようなeqメソッドを使用してこれを行うこともできますが、物事が複雑になると、各メソッドが非常に役立ちます。

$('#resultsBox li').eq(2).addClass('aaaa');
于 2012-08-08T07:17:40.200 に答える
6

これを実現する最もクリーンな方法は次のとおりです。 

$('#resultsBox li').eq(2).addClass('selected');

.eq メソッドに関するドキュメントは、http://api.jquery.com/eq/ にあります。

于 2012-08-08T07:18:10.747 に答える
2

:first セレクターまたは :nth-child セレクターを使用します。:nth-child セレクターについて言及するのは、クラスを最初のもの以外に追加したい場合のためだけです。必要に応じて、javascript を使用せずにプレーンな CSS で :nth-child を使用することもできます。

$("#resultBox li:nth-child(1)").addClass('aaa');
于 2012-08-08T07:19:17.283 に答える
0

eq selector

$('#resultsBox li:eq(2)').addClass('aaaa');

またeq function

$('#resultsBox li').eq(2).addClass('aaaa');
于 2012-08-08T07:17:43.790 に答える