jquery count li elements inside ul -> length?

Jquery

Jquery Problem Overview


If a ul has more than one li-element inside of it, something should happen, otherwise not!

What am I doing wrong?

if ( $('#menu ul').length > 1 ) {

Jquery Solutions


Solution 1 - Jquery

You have to count the li elements not the ul elements:

if ( $('#menu ul li').length > 1 ) {

If you need every UL element containing at least two LI elements, use the filter function:

$('#menu ul').filter(function(){ return $(this).children("li").length > 1 })

You can also use that in your condition:

if ( $('#menu ul').filter(function(){ return $(this).children("li").length > 1 }).length) {

Solution 2 - Jquery

The correct syntax is

$('ul#menu li').length

Solution 3 - Jquery

alert( "Size: " + $( "li" ).size() );

alert( "Size: " + $( "li" ).length );

Both .size() and .length return number of item. but size() method is deprecated (JQ 1.8). .length property can use for instead of size().

also you can use

alert($("ul").children().length);

Solution 4 - Jquery

Working jsFiddle

Please use .size() function instead of .length and also specify li tag in selector.

Change your code like.

if ( $('#menu ul li').size() > 1 ) {

Solution 5 - Jquery

Use $('ul#menu').children('li').length

.size() instead of .length will also work

Solution 6 - Jquery

Make the following change:

console.log($("#menu li").length);

Solution 7 - Jquery

Another approach to count number of list elements:

var num = $("#menu").find("li").length;
if (num > 1) {
  console.log(num);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
</ul>

Solution 8 - Jquery

Warning: Answers above only work most of the time!

In jQuery version 3.3.1 (haven't tested other versions)

$("#myList li").length; 

works only if your list items don't wrap. If your items wrap in the list then this code counts the number of lines occupied not the number of <li> elements.

$("#myList").children().length;

gets the actual number of <li> elements in your list not the number of lines that are occupied.

Solution 9 - Jquery

If you have a dom object of the ul, use the following.

$('#my_ul').children().length;

A simple example

window.setInterval(function() {
  let ul = $('#ul');                 // Get the ul
  let length = ul.children().length; // Count of the child nodes.

  // The show!
  ul.append('<li>Item ' + (length + 1) + '</li>');
  if (5 <= length) {
    ul.empty();
    length = -1;
  }
  $('#ul_length').text(length + 1);
}, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h4>Count of the child nodes: <span id='ul_length'>0</span></h4>
<ul id="ul"></ul>

Solution 10 - Jquery

('#menu li').length;

No need to mention ul because id is an unique element.

Solution 11 - Jquery

alert( "Size: " + $("li").size() ); 

or

alert( "Size: " + $("li").length );

You can find some examples of the .size() method here.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionmattView Question on Stackoverflow
Solution 1 - JqueryjantimonView Answer on Stackoverflow
Solution 2 - JqueryJyoti RajView Answer on Stackoverflow
Solution 3 - JqueryUmandaView Answer on Stackoverflow
Solution 4 - Jquerynaseer hussain jifriView Answer on Stackoverflow
Solution 5 - JquerySajid KhanView Answer on Stackoverflow
Solution 6 - Jquerybhuvana ganesanView Answer on Stackoverflow
Solution 7 - JqueryPenny LiuView Answer on Stackoverflow
Solution 8 - JqueryKelly MacInnisView Answer on Stackoverflow
Solution 9 - JqueryX 47 48 - IRView Answer on Stackoverflow
Solution 10 - JqueryRehan RajpootView Answer on Stackoverflow
Solution 11 - JqueryBiju B AdoorView Answer on Stackoverflow