jQuery zählt untergeordnete Elemente

324

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

Erweitern Sie das Snippet

Ich möchte die Gesamtzahl der <li>Elemente in zählen <div id="selected"></div>. Wie ist das mit jQuery's möglich .children([selector])?

javascript jquery dom

— Gautamlakum
quelle

stackoverflow.com/questions/250688/...

— onder

1

In reinem JS ist die Antwort von @ Mo. noch etwas niedrig, aber verwenden Sieelement.childelementCount

— Charles L.

602

Sie können .lengthnur mit einem Nachkommen-Selektor wie folgt verwenden:

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

Wenn Sie verwenden müssen .children(), dann ist es wie folgt:

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

Sie können beide Versionen hier testen .

— Nick Craver
quelle

30

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

oder:

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

— bcosca
quelle

10

Nur eine Notiz .size () wurde zugunsten von .length

— Eric Kigathi

18

schnellste:

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

— Ali Tarhini
quelle

2

Dies ist nicht die schnellste, in der Tat haben Sie es verlangsamt, indem Sie dort hinzugefügt div:)

— Nick Craver

1

Es hängt wirklich davon ab, welchen Browser Sie verwenden. In vielen modernen Browsern wird beim Hinzufügen des Elements findByElement verwendet, bevor nach ID oder Klasse gesucht wird, was langsamer ist. Bald wird dies jedoch in beiden Fällen ein strittiger Punkt sein, da alle DOM-Suchen mit einer nativen Funktion durchgeführt werden. In jedem Fall wäre eine einfache getElementById ('selected') oder $ ('# selected') an dieser Stelle schneller.

— Alex K

14

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

Sie könnten wahrscheinlich auch liin der Kinderauswahl weglassen .

Siehe .length.

— Felix Kling
quelle

13

Sie können JavaScript verwenden (jQuery wird nicht benötigt)

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

— Đặng Văn Thanh
quelle

12

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

oder noch besser

 $('#selected li').length;

— Martin Algesten
quelle

4

Mit childElementCountreinem Javascript ist das einfach möglich

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>

Erweitern Sie das Snippet

— Mo.
quelle

1

reine js

selected.children[0].children.length;

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

— Kamil Kiełczewski
quelle