Как посчитать количество элементов вложенных в родителя?

Question

[Сергей Горячев]

Есть у меня слайдер, список:

<ul class="mainslider clearfix">
<li>
<a href="/">
<img src="{$wa_theme_url}img/mainslider_01.png" alt="" />
</a>
</li>
</ul>

Количество слайдов заранее не известно.

Задача такая: нужно посчитать количество слайдов. Это нужно чтобы вывести навигацию по слайдам. Она также будет состоять из такого же количества блоков. Но навигация должна растягиваться на всю ширину страницы.

.navbar a {
width: calc(100% / X);
}

Вот пытаюсь понять, какое значение подставить в X.

И размер блоков должен считаться через calc. Посчитать я могу, но не знаю, как узнать количество li в блоке mainslider.

Answer 1

[Виталий Инчин ☢]

А умные люди делают так)

var container = document.querySelector(".mainslider");

//or
console.log(container.childElementCount);

//or
console.log(container.children.length);

calc(100% / X);

Меньше calc'ов, ради бога. Если вы все равно через JS подставляете значение, то сразу и подставляйте высчитанное.

Answer 2

[Александр]

$('.mainslider').children('li').length

Answer 3

[Денис]

var countLi = $('.mainslider li').length;