Holen Sie sich ein Element nach Index in jQuery

117

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>
jquery dom get Rama Rao M.
quelle
3
Die beiden dort verwendeten Methoden geben dom-Elemente anstelle von jQuery-Objekten zurück, sodass der Aufruf von .css nicht für sie funktioniert. Darius 'Antwort unten mit Gl. Ist genau das, was Sie wollen.
Richard Dalton

Antworten:

257 
$(...)[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

.eq(index) Rückgabe: jQuery

  • Beschreibung: Reduzieren Sie den Satz übereinstimmender Elemente auf den am angegebenen Index.
  • Siehe: https://api.jquery.com/eq/
Gdoron unterstützt Monica
quelle
19

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'});
Christofer Eliasson
quelle
12

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

$('ul').find('li').eq(index).css({'background-color':'#343434'});
Darius
quelle
1
Sie hätten den Selektor einfacher machen können mit $('ul li').eq(index).css({'background-color':'#343434'});
Gdoron unterstützt Monica am
1
In den meisten Browsern ist die Auswahl $('ul').find('li')jedoch schneller. [1 , 2 ]
Darius
1

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.

Yury Fedorov
quelle
-1

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>
Adam H.
quelle