1

Bom dia senhores,

Preciso contar elementos de uma li e adicionar esses valores dinamicamente contando os elementos li anteriores:

 <div class="conteudo">
            <ul>
                <li><i class="indice">1 - </i>Conteudo 1</li>
                <li><i class="indice">2 - </i>Conteudo 2</li>
                <li><i class="indice">3 - </i>Conteudo 3</li>
                <li><i class="indice">4 - </i>Conteudo 4</li>
                <li><i class="indice">5 - </i>Conteudo 5</li>
                <li><i class="indice">6 - </i>Conteudo 6</li>
            </ul>
        </div>
A ideia é que os elementos 'i' da class ="indice" recebam o cada um seu índice dinamicamente. Como sou novo com jquery estou tendo dificuldades em realizar essa função, alguem teria uma ideia de como posso resolver isso? Abraço a todos!

2
  • usa o each e o addClass() api.jquery.com/each api.jquery.com/addClass
    – periotto
    Commented 27/07/2015 às 14:47
  • Bom dia periotto, o each conta os elementos corretos? se sim, a minha dúvida é como eu faria para ele contar apenas os elementos anteriores e passar esse valor para o .indice! Abraço! Commented 27/07/2015 às 14:58

1 Resposta 1

3

$(function(){


  $('#add').click(function(){
      var count = $("ul").children().length;
      $('ul').append('<li><i class="indice" rel="'+(count+1)+'" >'+(count+1)+' - </i>Conteudo '+(count+1)+'</li>');
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="conteudo">
  <ul>
    <li><i class="indice" rel="1" >1 - </i>Conteudo 1</li>
    <li><i class="indice" rel="2" >2 - </i>Conteudo 2</li>
    <li><i class="indice" rel="3" >3 - </i>Conteudo 3</li>
    <li><i class="indice" rel="4" >4 - </i>Conteudo 4</li>
    <li><i class="indice" rel="5" >5 - </i>Conteudo 5</li>
    <li><i class="indice" rel="6" >6 - </i>Conteudo 6</li>
  </ul>
  
  <button id="add">Adicionar</button>
</div>

1
  • 1
    Era exatamente isso, Valeu Jefferson! Abraço! Commented 27/07/2015 às 15:30

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 .