Obtener un elemento por índice en jQuery

117

Tengo una lista desordenada y el índice de una lietiqueta en esa lista. Tengo que obtener el lielemento usando ese índice y cambiar su color de fondo. ¿Es esto posible sin recorrer la lista completa? Quiero decir, ¿hay algún método que pueda lograr esta funcionalidad?

Aquí está mi código, que creo que funcionaría ...

<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
fuente
3
Las dos formas en que está utilizando devuelven elementos dom en lugar de objetos jQuery, por lo que la llamada a .css no funcionará en ellos. La respuesta de Darius a continuación usando eq es lo que quieres.
Richard Dalton

Respuestas:

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

Los objetos DOM no tienen cssfunción, use el último ...

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

docs:

.get(index) Devoluciones: Elemento

.eq(index) Devoluciones: jQuery

  • Descripción: reduce el conjunto de elementos coincidentes al que está en el índice especificado.
  • Ver: https://api.jquery.com/eq/
gdoron está apoyando a Monica
fuente
19

Puede usar el .eq()método de jQuery para obtener el elemento con un índice determinado.

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

Puede utilizar el método eq o selector :

$('ul').find('li').eq(index).css({'background-color':'#343434'});
Darius
fuente
1
Podrías haber simplificado el selector con $('ul li').eq(index).css({'background-color':'#343434'});
gdoron está apoyando a Monica
1
Pero en la mayoría de los navegadores, el selector $('ul').find('li')es más rápido. [1 , 2 ]
Darius
1

Hay otra forma de obtener un elemento por índice en jQuery usando la pseudoclase CSS :nth-of-type:

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

Hay otros selectores que puede usar con jQuery para que coincida con cualquier elemento que necesite.

Yury Fedorov
fuente
-1

Puede omitir jquery y simplemente usar el etiquetado de estilo 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
fuente