Obtenha um elemento por índice em jQuery

117

Eu tenho uma lista não ordenada e o índice de uma limarca nessa lista. Tenho que pegar o lielemento usando aquele índice e mudar sua cor de fundo. Isso é possível sem repetir a lista inteira? Quer dizer, existe algum método que possa atingir essa funcionalidade?

Aqui está o meu código, que acredito que funcionaria ...

<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
As duas maneiras que você está usando retornam elementos dom em vez de objetos jQuery, portanto, a chamada para .css não funcionará neles. A resposta de Darius abaixo usando eq é o que você quer.
Richard Dalton

Respostas:

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

Objetos DOM não têm cssfunção, use o último ...

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

docs:

.get(index) Retorna: Elemento

.eq(index) Retorna: jQuery

gdoron está apoiando Monica
fonte
19

Você pode usar o .eq()método jQuery para obter o elemento com um determinado índice.

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

Você pode usar o método ou seletor eq :

$('ul').find('li').eq(index).css({'background-color':'#343434'});
Darius
fonte
1
Você poderia ter simplificado o seletor com $('ul li').eq(index).css({'background-color':'#343434'});
gdoron está apoiando Monica
1
Mas na maioria dos navegadores o seletor $('ul').find('li')é mais rápido. [1 , 2 ]
Dario
1

Existe outra maneira de obter um elemento por índice em jQuery usando a :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>

Existem outros seletores que você pode usar com jQuery para corresponder a qualquer elemento que você precisa.

Yury Fedorov
fonte
-1

Você pode pular o jquery e apenas usar a marcação 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
fonte