Как посчитать количество элементов ul в JavaScript?

Рейтинг: 6Ответов: 2Опубликовано: 05.03.2011

Хочу сделать меню в две строки, для этого мне нужно посчитать количество элементов ul, какая функция в javascript отвечает за это? Пробовал примерно так:

<ul>
    <li>Главная</li>
    <li>Контакты</li>
    <li>Резюме</li>
    <li>Портфолио</li>
    <li>Услуги</li>
    <li>Стихи</li>
    <li>Программы</li>
    <li>Статьи</li>
</ul>

<script>
    var spis = document.ul.li.length;
    document.write('Кол-во элементов ul '+spis);
</script>

Скрипт должен считать количество li и после каждой 4-ой, переводить остальные на следующую строку.

javascript
Источник: Stack Overflow на русском

Ответы

▲ 10Принят

Как минимум есть два способа

<ul id="mymenu">
    <li>aaaa</li>
    <li>bbbb</li>
    ......
</ul>

<script type="text/javascript">
    // способ 1:
    alert(document.getElementById('mymenu').childNodes.length);

    // способ 2:
    alert(document.getElementById('mymenu').getElementsByTagName('li').length);
</script>
▲ 4
<script>
    var spis = document.ul.li.length;
    document.write('Кол-во элементов ul '+spis);
</script>

Этот код не валидный DOM, нужно использовать dom-функции:

document.getElementsByTagName('ul')[0].getElementsByTagName('li');

Но именно Ваша задача решается так:

<style>
    ul li {
        float: left;
        width: 50px;
        height: 50px;
    }
</style>
<ul>
    <li>element 1</li>
    <li>element 2</li>
    <li>element 3</li>
    <li>element 4</li>
    <li>element 5</li>
    <li>element 6</li>
</ul>