0

Alguns elementos dentro que pode variar de acordo com a página. Consigo percorrer esse UL, e tratar cada LI como um elemento do Array. A minha dúvida é como é possível eu exibir apenas os 3 primeiros LI e esconder o restante para que não seja exibido.

<ul class="minhaClasse">
<li>Elemento</li>
<li>Elemento</li>
<li>Elemento</li>
<li>Elemento</li>
<li>Elemento</li>
</ul>

Meu projeto possui jQuery então se facilitar é viável tbm =) Obg galera

3 Respostas 3

1

Pode percorrer as li através do método each() e dar um hide() nos outros:

$(() => {
  $("li").each(function(index) {
    console.log(index + ": " + $(this).text());
    
    if(index > 2) {
      $(this).hide();
    }
  });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="minhaClasse">
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
  <li>Elemento 4</li>
  <li>Elemento 5</li>
</ul>

1

Use o método .slice() do jQuery com o valor 3. Como o valor é de base 0, ele irá ocultar do 4º elemento (índice 3) até o último:

$(".minhaClasse li").slice(3).hide();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="minhaClasse">
   <li>Elemento</li>
   <li>Elemento</li>
   <li>Elemento</li>
   <li>Elemento</li>
   <li>Elemento</li>
   <li>Elemento</li>
   <li>Elemento</li>
</ul>

O método aceita 2 argumentos: início e fim. Se o segundo for omitido, irá até o fim. Os elementos não visíveis ficarão com display: none.

Se quiser remover de vez os elementos não visíveis, basta trocar o .hide() por .remove():

$(".minhaClasse li").slice(3).remove();
2
  • 1
    Vou dar +1, bem simples e enxuto.
    – LeAndrade
    Commented 30/07/2019 às 18:38
  • 1
    Valeu! Dei +1 tb na sua por ser funcional, embora não tanto enxuto :D
    – Sam
    Commented 30/07/2019 às 18:41
1

Cara da para fazer apenas com CSS usando :nth-child() vc pode pegar a partir do 3 elemento e colocar display:none para todo mundo.

Aqui no exemplo eu coloquei apenas color:red do 4 ao 6, mas vc pode colocar o que quiser como display:none por exemplo como fiz do 7 ao 9 que nem aparecem na tela... Se tiver interesse em ver mais sobre nth-child() sugiro a leitura O que significam o "n", números e sinais nos seletores "nth-child" ou "nth-last-child"?

li:nth-child(n+4) {
    /* display: none; */
    color: red;
}
li:nth-child(n+7) {
    display: none;
}
<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li><!-- daqui para baixo fica vermelho -->
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li><!-- daqui para baixo não aparece -->
    <li>item 8</li>
    <li>item 9</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 .