Obtener un elemento por índice en jQuery

Tengo una lista desordenada y el índice de una etiqueta li en esa lista. Tengo que obtener el elemento li usando ese índice y cambiar su color de fondo. ¿Es esto posible sin hacer un bucle en toda la lista? 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>
Author: informatik01, 2012-03-27
Source

5 answers

$(...)[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 la función css, use la última...

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

Docs:

.get(index) Devuelve: Element

.eq(index) Devuelve: jQuery

 220
Author: gdoron,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-11 18:48:25

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

$('ul li').eq(index).css({'background-color':'#343434'});
 17
Author: Christofer Eliasson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-03-27 10:18:14

Puede usar el método eq o selector : 

$('ul').find('li').eq(index).css({'background-color':'#343434'});
 10
Author: Darius Morawiec,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-29 00:41:27

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

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

 0
Author: Yury Fedorov,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-07 06:51:22

Puede omitir el 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>
 0
Author: Adam H,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-12-27 19:24:21