2

Por exemplo, no HTML, tenho assim:

<ul class="benefits">
<li>Finalização rápida e fácil</li>
<li>Múltiplos endereços de envio</li>
<li>Acesso fácil a seu histórico de pedidos e status</li>
</ul>

Como podem ver, tem 3 li's, como pego a [0] a [1] e a [2] com JQuery?

Tentei algo estranho, mas como de esperado não deu certo:

$('ul.benefits li' + [0]).text('teste');

3 Respostas 3

2

Para obter esses indices basta jogar em um array...

var lis = [];
$('ul.benefits li').each(function(el){
	lis.push($(this).text());
})

console.log(lis);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="benefits">
<li>Finalização rápida e fácil</li>
<li>Múltiplos endereços de envio</li>
<li>Acesso fácil a seu histórico de pedidos e status</li>
</ul>

1

Você pode pegar usando o .get:

console.log($('.benefits li').get(0));
console.log($('.benefits li').get(1));
console.log($('.benefits li').get(2));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="benefits">
<li>Finalização rápida e fácil</li>
<li>Múltiplos endereços de envio</li>
<li>Acesso fácil a seu histórico de pedidos e status</li>
</ul>

Ou pode usar o eq:

console.log($('.benefits li:eq(0)').text());
console.log($('.benefits li:eq(1)').text());
console.log($('.benefits li:eq(2)').text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="benefits">
<li>Finalização rápida e fácil</li>
<li>Múltiplos endereços de envio</li>
<li>Acesso fácil a seu histórico de pedidos e status</li>
</ul>

1
  • 1
    Todas as respostas funcionaram, mas achei mais prático e rapido o uso do :eq, obrigado! Commented 18/07/2017 às 19:33
1

É possível percorrer cada item e manipulá-lo usando $.each:

$(".benefits li").each(function(idx, item){
  // para pegar
  console.log($(item).text());
  
  // para alterar
  $(item).text("texto " + idx);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="benefits">
  <li>Finalização rápida e fácil</li>
  <li>Múltiplos endereços de envio</li>
  <li>Acesso fácil a seu histórico de pedidos e status</li>
</ul>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .