Чому .children.length повертає лише 2?

Я намагаюся отримати кількість дочірніх елементів wrapper за допомогою властивості .length , але при використанні з .children підрахунком завжди дорівнює 2.

    <div id="wrapper">
       <div>content a</div> <!-- visible -->
       <div>content b</div> <!-- visible -->
       <div>content c</div> <!-- not visible -->
       <div>content d</div> <!-- not visible -->
    </div>

Як я дізнався про SO, властивість length не враховує видимість елементів. Тому в цьому випадку повернене значення має дорівнювати 4 , але при використанні $ ("# wrapper"). Kids.length; повертається.

Питання: чому $ ('# wrapper'). kids.length; повертає лише 2?

Дякую!

3

7 Відповіді

Перевірити

$('#train').children().length

Demo: Fiddle

You are getting 2 because
$('#train').children.length return the number of arguments expected by the function.

For details see Function.length

У вашому випадку $ ('# train'). Kids посилається на функцію, яка очікує 2 аргументи, тому ви отримуєте 2 як вихід, а не тому, що це число, якщо видимі діти

5
додано
Дякую вам, Джоні, не можу повірити, що це зводилося до випуску кронштейна ... Я думаю, якщо б у мене було більше 4-х елементів у той час було б зрозуміліше.
додано Автор ᴍᴀᴛᴛ ʙᴀᴋᴇʀ, джерело

Ваша проблема в тому, що ви забули дужки.

Як не дивно, це повертає 2, незалежно від елемента:

$(element).children.length

Додайте дужки, і це нормально:

$(element).children().length

Чому ви отримали 2? Це тому, що довжина функції - як сказано від MDN ,

кількість аргументів, очікуваних функцією.

3
додано

Форуми вказують на властивість .length , але це лише повертає кількість видимих ​​елементів.

Ні, .length повертає кількість елементів у розглянутому об'єкті jQuery, незалежно від того, як ви отримали об'єкт jQuery або чи є в даний час видимі елементи.

Як порахувати всі діти з #train?

Ви можете зробити будь-який з цих варіантів для вашої ситуації:

// all direct children of any element type
$("#train").children().length
// OR just the DIV children
$("#train").children("div").length
// OR all descendant DIVs
$("#train").find("div").length

при використанні $ ('# train'). kids.length; 2.

Це тому, що ви насправді не викликали метод .children() - ви зупинили круглі дужки, тобто ви отримали властивість .length самої функції, яка повертає кількість оголошених аргументів.

3
додано
$('#train > div:visible').length  //visible ones
$('#train > div:hidden').length //hidden ones
$('#train > div').length //all children DIVs
2
додано

Це має працювати:

var childrenCount = $('#train').children().length;
2
додано
Чому це спрацювало?
додано Автор jao, джерело
Може бути, це буде (я не перевірив), але, можливо, ви можете пояснити, чому це буде працювати і чому код ОП не працює. Ось що я мав на увазі.
додано Автор jao, джерело
@jao - Чому б це не було?
додано Автор nnnnnn, джерело
згідно з розміткою OP child() поверне всі 4 div , які знаходяться всередині div з id = "train"/code>
додано Автор Igor Dymov, джерело
OP не ініціював метод kids , він отримав значення властивості kids (фактично це функція)
додано Автор Igor Dymov, джерело

Це зробить це

$('#train').children().length
1
додано

Замість наведеного нижче коду:

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

Використовуйте код нижче:

$('#train').children("div").length;
0
додано