1

Boa tarde Pessoal gostaria de pegar a quantidades de li dentro dessa div, como posso fazer?

<div id="collapse305" role="tabpanel" aria-labelledby="heading375" aria-expanded="false" style="height: 0px;">      
  <div class="panel-body">
    <ul>
      <li>
        <a href="/download/1771" target="_blank">Test1</a>  
        <span class="label label-info"></span>
      </li>
      <li>
        <a href="/download/1791" target="_blank">Test2</a>  
        <span class="label label-info"></span>
      </li>
      <li>
         <a href="/download/1796" target="_blank">Test3</a>  
         <span class="label label-info"></span>
      </li>
      <li>
         <a href="/download/1801" target="_blank">Test4</a>  
         <span class="label label-info"></span>
      </li>
      <li>
         <a href="/download/1827" target="_blank">Test5</a>  
         <span class="label label-info"></span>
      </li>
    </ul>      
  </div>
</div>

https://jsfiddle.net/kg9j78s5/1/

4 Respostas 4

2

A forma de contar depende muito do que você quer dizer com "li's dentro de uma div".

No seu caso específico, bastaria fazer document.querySelectorAll('#collapse305 li').length, como sua própria resposta indicou.

Mas e se tivermos um HTML assim:

<div id="collapse305">
    <div class="panel-body">
        <ul id="lista1">
            <li>Test1</li>
            <li>Test2</li>
            <li>Test3</li>
            <li>
              Test4
              <ul id="sublista1">
                  <li>Subtest4.1</li>
                  <li>Subtest4.2</li>
              </ul>
            </li>
        </ul>
        <p>blablabla</p>
        <ul id="lista2">
            <li>Test5</li>
            <li>Test6</li>
        </ul>
        <div id="outra">
            <ul id="lista3">
                <li>Test7</li>
                <li>Test8</li>
                <li>
                Test9
                  <ul id="sublista3">
                      <li>Test10</li>
                  </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

Você quer contar todos os elementos li? Ou somente os do primeiro ul? Ou só os que não estão aninhados? Ou só os do primeiro nível?

Por exemplo, se eu fizer document.querySelectorAll('#collapse305 > div > ul > li'), ele só vai pegar Test1, Test2, Test3, Test4, Test5 e Test6, já que o > só pega elementos que são descendentes diretos, ou seja, #collapse305 > div só pega a div que é filha imediata do elemento cujo id é collapse305 (que no caso é a div class="panel-body"), depois > ul só pega os elementos ul que são filhos diretos desta div class="panel-body" (ou seja, somente os elementos ul cujos id's são lista1 e lista2), e por fim > li vai pegar somente os elementos li que são filhos diretos destes ul's (por isso ele não pega o Subtest4.1 e nem Subtest4.2, já que estes não são filhos diretos de lista1).

Já quando você não usa >, ele pega os descendentes daquele elemento, independente de serem filhos diretos (ou seja, podem ser "netos", "bisnetos", etc). Veja mais sobre esses seletores aqui.


Isso permite várias formas diferentes de contar. Por exemplo, se remover um > do seletor: document.querySelectorAll('#collapse305 div > ul > li').

Agora ele vai pegar qualquer div dentro de collapse305, o que quer dizer que além da div class="panel-body", também será pego a div id="outra", e com isso o ul id="lista3" também será considerado. Porém, só serão pegos os li's que são filhos diretos deste ul, e por isso o Test10 fica de fora. O resultado será Test1, Test2, Test3, Test4, Test5, Test6, Test7, Test8 e Test9.

Mas se eu mudar para document.querySelectorAll('#collapse305 > div > ul li'), agora eu pego todos os li's dentro de lista1 e lista2, ou seja, Test1, Test2, Test3, Test4, Subtest4.1, Subtest4.2, Test5 e Test6.


Claro que para casos mais simples como o seu (dentro da div só existe um ul sem li's aninhados), não fará diferença. Mas dependendo de como está o HTML e do que você quer considerar na contagem, usar o seletor correto pode fazer toda a diferença.

1

Fácil e prático meu amigo. Terá de usar o JavaScript.

Caso queira que a quantidade apareça no console, basta dar um console.log

const quantidadeLi = document.querySelectorAll('li').length;
console.log(quantidadeLi);

O atributo length no código está diretamente ligado ao querySelectorAll. Se caso queira exibir na tela para o usuário, use:

  const quantidadeLi = document.querySelectorAll('li').length;
  document.body.innerHTML = `<p> ${quantidadeLi} </p>`

O document.body.innerHTML irá criar um parágrafo com a quantidade de li no corpo da página. Qualquer dúvida me avise.

1

Yo!

Minha sugestão é a utilização de uma classe para seus li

Ganho: A contagem não irá depender daquela div, específica ou de nenhuma outra.

Perda: Talvez a classe já esteja definida, e não possa dispor de tal.

Utilizando Jquery 3.5.1

<!doctype html>
<html>
<head>
    <script src="jquery.js">
</script>
<meta charset="utf-8">
<title>Test Div Count</title>
</head>
    <div id="contteiner">
        <ul>
            <li class="liTeste">Teste 1</li>
            <li class="liTeste">Teste 2</li>
            <li class="liTeste">Teste 3</li>
            <li class="liTeste">Teste 4</li>
            <li class="liTeste">Teste 5</li>
        </ul>
    </div>
<body>
</body>
</html>
<script type="text/javascript">
    $(document).ready(function(){                                     
        alert($(".liTeste").length) //AQUI ACONTECE A CONTAGEM
    });
</script>

0

A reposta é:

var qtd = document.querySelectorAll('#collapse305  li').length;
console.log('A quantidade de <li>\'s é', qtd);
<div id="collapse305" role="tabpanel" aria-labelledby="heading375" aria-expanded="false" style="height: 0px;">      
    <div class="panel-body">
        <ul>
            <li>
                <a href="/download/1771" target="_blank">Test1</a>  
                <span class="label label-info"></span>
            </li>
            <li>
                <a href="/download/1791" target="_blank">Test2</a>  
                <span class="label label-info"></span>
            </li>
            <li>
                <a href="/download/1796" target="_blank">Test3</a>  
                <span class="label label-info"></span>
            </li>
            <li>
                <a href="/download/1801" target="_blank">Test4</a>  
                <span class="label label-info"></span>
            </li>
            <li>
                <a href="/download/1827" target="_blank">Test5</a>  
                <span class="label label-info"></span>
            </li>
        </ul>      
    </div>
</div>

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 .