jQueryでインデックスによって要素を取得する

順不同リストとliそのリスト内のタグのインデックスがあります。私は取得する必要がありますliそのインデックスを使用し要素その背景色を変更する必要があります。リスト全体をループせずにこれは可能ですか？つまり、この機能を実現できる方法はありますか？

これが私のコードです、これはうまくいくと思います...

<script type="text/javascript">
  var index = 3;
</script>

<ul>
    <li>India</li>
    <li>Indonesia</li>
    <li>China</li>
    <li>United States</li>
    <li>United Kingdom</li>
</ul>

<script type="text/javascript">
  // I want to change bgColor of selected li element
  $('ul li')[index].css({'background-color':'#343434'});

  // Or, I have seen a function in jQuery doc, which gives nothing to me
  $('ul li').get(index).css({'background-color':'#343434'});
</script>

$(...)[index]      // gives you the DOM element at index
$(...).get(index)  // gives you the DOM element at index
$(...).eq(index)   // gives you the jQuery object of element at index

DOMオブジェクトにはcss機能がありません。最後のものを使用してください...

$('ul li').eq(index).css({'background-color':'#343434'});

docs：

.get(index) 戻り値：要素

• 説明：jQueryオブジェクトに一致するDOM要素を取得します。
• 参照：https : //api.jquery.com/get/

.eq(index) 戻り値：jQuery

• 説明：一致する要素のセットを、指定したインデックスにあるものに減らします。
• 参照：https : //api.jquery.com/eq/

jQueryの.eq()メソッドを使用して、特定のインデックスを持つ要素を取得できます。

$('ul li').eq(index).css({'background-color':'#343434'});

eqメソッドまたはセレクターを使用できます。

$('ul').find('li').eq(index).css({'background-color':'#343434'});

CSS :nth-of-type疑似クラスを使用してjQueryでインデックスによって要素を取得する別の方法があります。

<script>
    // css selector that describes what you need:
    // ul li:nth-of-type(3)
    var selector = 'ul li:nth-of-type(' + index + ')';
    $(selector).css({'background-color':'#343434'});
</script>

必要な要素に一致させるためにjQueryで使用できる他のセレクターがあります。

jqueryをスキップして、CSSスタイルのタグ付けを使用することもできます。

 <ul>
 <li>India</li>
 <li>Indonesia</li>
 <li style="background-color:#343434;">China</li>
 <li>United States</li>
 <li>United Kingdom</li>
 </ul>