Holen Sie sich ein Element nach Index in jQuery

Ich habe eine ungeordnete Liste und den Index eines liTags in dieser Liste. Ich muss das liElement mithilfe dieses Index abrufen und seine Hintergrundfarbe ändern. Ist dies möglich, ohne die gesamte Liste zu durchlaufen? Ich meine, gibt es eine Methode, mit der diese Funktionalität erreicht werden kann?

Hier ist mein Code, von dem ich glaube, dass er funktionieren würde ...

<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-Objekte haben keine cssFunktion, verwenden Sie die letzte ...

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

docs:

.get(index) Rückgabe: Element

• Beschreibung: Rufen Sie die DOM-Elemente ab, die mit dem jQuery-Objekt übereinstimmen.
• Siehe: https://api.jquery.com/get/

.eq(index) Rückgabe: jQuery

• Beschreibung: Reduzieren Sie den Satz übereinstimmender Elemente auf den am angegebenen Index.
• Siehe: https://api.jquery.com/eq/

Sie können die .eq()Methode von jQuery verwenden, um das Element mit einem bestimmten Index abzurufen.

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

Sie können die eq-Methode oder den Selektor verwenden :

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

Es gibt eine andere Möglichkeit, ein Element anhand des Index in jQuery mithilfe der CSS :nth-of-type- Pseudoklasse abzurufen :

<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>

Es gibt andere Selektoren , die Sie mit jQuery verwenden können, um mit jedem Element übereinzustimmen, das Sie benötigen.

Sie können die Abfrage überspringen und einfach das Tagging im CSS-Stil verwenden:

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