jQuery count éléments enfants

<div id="selected">
  <ul>
    <li>29</li>
    <li>16</li>
    <li>5</li>
    <li>8</li>
    <li>10</li>
    <li>7</li>
  </ul>
</div>

Je veux compter le nombre total d' <li>éléments dans <div id="selected"></div>. Comment est-ce possible en utilisant jQuery .children([selector])?

Vous pouvez utiliser .lengthavec juste un sélecteur descendant , comme ceci:

var count = $("#selected li").length;

Si vous devez utiliser .children(), c'est comme ceci:

var count = $("#selected ul").children().length;

Vous pouvez tester les deux versions ici .

$("#selected > ul > li").size()

ou:

$("#selected > ul > li").length

le plus rapide:

$("div#selected ul li").length

var length = $('#selected ul').children('li').length
// or the same:
var length = $('#selected ul > li').length

Vous pourriez probablement aussi omettre lidans le sélecteur pour enfants.

Tu vois .length.

Vous pouvez utiliser JavaScript (pas besoin de jQuery)

document.querySelectorAll('#selected li').length;

$('#selected ul').children().length;

ou encore mieux

 $('#selected li').length;

C'est tout simplement possible avec childElementCountdu javascript pur

var countItems = document.getElementsByTagName("ul")[0].childElementCount;
console.log(countItems);

<div id="selected">
  <ul>
    <li>29</li>
    <li>16</li>
    <li>5</li>
    <li>8</li>
    <li>10</li>
    <li>7</li>
  </ul>
</div>

pur js

selected.children[0].children.length;

let num = selected.children[0].children.length;

console.log(num);

<div id="selected">
  <ul>
    <li>29</li>
    <li>16</li>
    <li>5</li>
    <li>8</li>
    <li>10</li>
    <li>7</li>
  </ul>
</div>