How to search for an element with the same class depending on the number of children?

Question

My scenario is this, I have two ul with li. As uls have the same class, but I wanted to manipulate only one of them, in this case, the one that has only one li as a daughter.

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

Example 2:

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

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

I need to manipulate just the ul test that have only 1 child, which in this case is the second.

I thought I’d select all the uls, and make a check with the childElementCount, if it were bigger than 1, I would apply a CSS to ul, if not, nothing would happen. But I tried to use childElementCount and I couldn’t make the comparison, I tried the .find() also.

Answer 1

you can search for the li belonging to .teste who is only daughter, then access the relationship of the same.

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>

if you prefer, in 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>

Answer 2

One way is by using the 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>

Answer 3

I caught it follows your js code and added the if you need.

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.
});

Answer 4

Try this, put an id on your ul.

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

To know the size:

$("#minhalista li"). length