Ottieni un elemento per indice in jQuery

117

Ho un elenco non ordinato e l'indice di un litag in tale elenco. Devo ottenere l' lielemento usando quell'indice e cambiare il suo colore di sfondo. È possibile senza ripetere l'intero elenco? Voglio dire, esiste un metodo che potrebbe ottenere questa funzionalità?

Ecco il mio codice, che credo funzionerebbe ...

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

3

I due modi in cui stai utilizzando restituiscono elementi dom anziché oggetti jQuery, quindi la chiamata a .css non funzionerà su di essi. La risposta di Dario di seguito usando l'eq è ciò che desideri.

— Richard Dalton

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

Gli oggetti DOM non hanno cssfunzione, usa l'ultimo ...

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

docs:

.get(index) Restituisce: Element

Descrizione: recupera gli elementi DOM corrispondenti all'oggetto jQuery.
Vedi: https://api.jquery.com/get/

.eq(index) Restituisce: jQuery

Descrizione: riduce il set di elementi corrispondenti a quello all'indice specificato.
Vedi: https://api.jquery.com/eq/

— gdoron sta supportando Monica
fonte

19

Puoi usare il .eq()metodo di jQuery per ottenere l'elemento con un certo indice.

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

— Christofer Eliasson
fonte

12

Puoi utilizzare il metodo o il selettore eq :

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

— Darius
fonte

1

Avresti potuto rendere il selettore più semplice con $('ul li').eq(index).css({'background-color':'#343434'});

— gdoron sta supportando Monica

1

Ma nella maggior parte dei browser il selettore $('ul').find('li')è più veloce. [1 , 2 ]

— Dario,

1

C'è un altro modo per ottenere un elemento per indice in jQuery usando la :nth-of-typepseudo-classe CSS :

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

Ci sono altri selettori che puoi usare con jQuery per abbinare qualsiasi elemento di cui hai bisogno.

— Yury Fedorov
fonte

-1

Puoi saltare il jquery e usare semplicemente il tagging in stile CSS:

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