6

O meu cenário é o seguinte, eu tenho duas ul com li. As uls possuem a mesma classe, porém eu queria manipular apenas uma delas, no caso, a que possui apenas uma li como filha.

Exemplo: http://codepen.io/anon/pen/OMXpVg

Exemplo 2:

 <ul class="teste">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

<ul class="teste">
<li>1</li>
</ul>

Eu preciso manipular apenas a ul teste que tenha apenas 1 filho, que no caso é a segunda.

Pensei em selecionar todas as uls, e fazer uma verificação com o childElementCount, se fosse maior que 1, eu aplicaria um CSS na ul, se não, nada aconteceria. Porém tentei usar o próprio childElementCount e não consegui fazer a comparação, tentei o .find() também.

3
  • Nao entendi o que você quer fazer. Commented 21/12/2015 às 15:38
  • Olhe isso
    – durtto
    Commented 21/12/2015 às 15:41
  • @PauloHDSousa, veja se entende agora
    – haykou
    Commented 21/12/2015 às 15:42

4 Respostas 4

3

você pode procurar pela li pertencente a .teste que é filha unica, então acessar o parentNode da mesma.

var itens = document.querySelectorAll(".teste li:only-child");
var listas =[].map.call(itens, function (item, indice) {
  return item.parentNode;
})
console.log(listas);
<ul class="teste">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

<ul class="teste">
  <li>1</li>
</ul>

caso prefira, em jQuery:

var listas = $(".teste li:only-child").parent();
console.log(listas);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="teste">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

<ul class="teste">
  <li>1</li>
</ul>

4
  • funcionou perfeitamente, só achei a utilização do Jquery.filter mais simples pro meu entendimento.
    – haykou
    Commented 21/12/2015 às 16:03
  • @haykou pode ficar ainda mais simples utilizando o exemplo do TobyMosque var $minhaUl = $(".teste li:only-child").parent(); Commented 21/12/2015 às 16:12
  • 1
    @PedroCamaraJunior tinha esqueci que o .parent() faz exatamente a mesma coisa que o meu .map estava fazendo. Commented 21/12/2015 às 16:14
  • valeu galera, nao sei nem qual marcar como resposta porque todas funcionaram
    – haykou
    Commented 21/12/2015 às 16:15
2

Uma maneira é utilizando o jQuery.filter()

var $elementos = $(".teste");

var $minhaUl = $elementos.filter(function() {
  return $(this).find('li').length === 1;
});

$minhaUl.css('background', 'blue');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="teste">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

<ul class="teste">
  <li>1</li>
</ul>

1

Peguei segue seu código js e adicionei o if que você precisa.

var lista = document.querySelectorAll('.lista');
console.log(lista);
var listaj = $('.lista');
console.log(listaj.size());
$( ".lista" ).each(function( index ) {
 if( $(this).find("li").length == 1)
   //Código aqui apenas 1 item na LI.
});
2
  • método .size () é obsoleto a partir do jQuery 1.8.
    – durtto
    Commented 21/12/2015 às 15:52
  • @durtto ele fez assim no código dele, só adaptei a parte final Commented 21/12/2015 às 15:54
-2

Tente isso, colocar uma id na sua ul.

<ul id="minhaLista">
    <li>Elemento 1</li>
    <li>Elemento 2</li>
</ul>

Para saber o tamanho:

$("#minhaLista li").length

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 .