How to catch a class with Jquery array?

Asked

Viewed 372 times

2

For example, in HTML, I have this: 

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

As you can see, it has 3 li’s, as caught by [0] to [1] and [2] with Jquery?

I tried something strange, but as expected it didn’t work:

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

3 answers

2

To get these indices just play in an 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


You can pick it up using the .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>

Or you can use the 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

    All the answers worked, but I found it more practical and quick to use :eq, thank you!

1

It is possible to scroll through each item and manipulate it using $.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>

Browser other questions tagged jquery html

You are not signed in. Login or sign up in order to post.