Как добраться до селектора?

@Belena27089 · Регистрация: 17.03.2017

Студворк — интернет-сервис помощи студентам

Добрый день.Есть меню вида

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 <ul><a></a>
      <li><a></a></li>
      <li><a></a>
         <ul><a></a>
            <ul><a></a>
                   <li><a></a></li>
                   <li><a></a></li>
            </ul>
             <ul><a></a>
                   <li><a></a></li>
                   <li><a></a></li>
            </ul>
            <li><a></a></li>
            <li><a></a></li>
            <li><img></li>
          </ul>
      </li>
</ul>

До ul и img я добралась,надо добраться ul>li -первый потомок.

JavaScript
1
2
3
4
5
6
7
8
var lis = document.getElementsByTagName('ul');
     for (i = 0; i < lis.length; i++) {
       // получить название из текстового узла
       var title = lis[i].firstChild.data;
       // получить количество детей
       var countUrl = lis[i].getElementsByTagName('img').length;
       var childCount = lis[i].getElementsByTagName('ul').length;
       var childCountLi = lis[i].firstChild.length;

Добавлено через 12 минут
Надо добраться ul>li -первый потомок.

Добавлено через 35 минут
Или просто посчитать всех первых потомков ul>ul и ul>li

Добавлено через 42 минуты

JavaScript
1
var childCountLi = lis[i].children[0].length;

Выдаёт undefined

Добавлено через 8 минут
var childCountLi = lis[i].children.length;посчитала

@mrtoxas · 19.03.2017, 17:21

Belena27089, не надо пока никуда добираться. Надо сначала сделать правильную структуру списка.
Непосредственными дочерними элементами UL могут быть только LI. А вот LI уже может содержать в себе другие элементы, в т.ч. и UL

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<ul>
  <li>
    <a href=""></a>
    <ul>
      <li>
        <a href=""></a>
      </li>
    </ul>
  </li>
  <li>
    <a href=""></a>
  </li>
</ul>

Только так и никак иначе.

@Belena27089 · 20.03.2017, 04:32 **[ТС]**

На cms такая структура меню, я добралась до всех элементов
https://jsfiddle.net/ElenaB/cm2trj0u/9/

На сайте мой код так выглядит.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{literal}<script>
        var lis = document.getElementsByTagName('ul');
        for (i = 0; i < lis.length; i++) {
// получить количество детей
            var parent = lis[0];
            var countImg = lis[i].getElementsByTagName('img').length;
            var childCount = lis[i].getElementsByTagName('ul').length;
            var childCountLi = lis[i].children.length;
            if (childCount >= 1 && countImg >= 1 && childCountLi <= 4) {
                lis[i].className = 'bigTab';
            }
            if (countImg >= 1 && childCountLi == 5) {
                lis[i].className = 'bigLageTab';
            }
            if (childCount >= 1 && countImg >= 1 && childCountLi > 5 && !parent){
                lis[i].className = 'noImg';
            }
            if (countImg === 0) {
                lis[i].className = 'noImg';
            }
        }
        </script>{/literal}

Добавлено через 10 минут
Там дочерние элементы и ul и li, в зависимости есть или нет подкатегории.

@Belena27089 · 22.03.2017, 16:23 **[ТС]**

Добавлю свой код, может кому-то пригодится.Выборка , подключение классов, стилей и исключение родителя.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var lis = document.getElementsByTagName('ul');
        for (i = 0; i < lis.length; i++) {           
// получить количество детей
            var parent = lis[0];
            var countImg = lis[i].getElementsByTagName('img').length;
            var childCount = lis[i].getElementsByTagName('ul').length;
            var childCountLi = lis[i].children.length;
            if (childCount >= 1 && countImg >= 1 && childCountLi <= 4) {
                lis[i].className = 'bigTab';
            }
            if (countImg <= 3 && childCountLi == 5) {
                lis[i].className = 'bigLageTab';
            }
            if (countImg == 4 && childCountLi <= 6) {
                lis[i].className = 'bigXLageTab';
            }
            if (childCountLi >= 7) {
                lis[i].classList.add("noImg");
                lis[i].style.backgroundColor = 'red';
                parent.classList.remove("noImg");
                parent.classList.add("sf-menu");
            }
            if (countImg === 0) {
                lis[i].className = 'noImg';
            }            
        }

Опытных программистов прошу прокомментировать, может я слишком наворотила.Но работает.

Добавлено через 26 минут
Почему-то класс .noImg совсем не исчезает из classList элемента ul-родителя(пока не разобралась), но вставляется в середину списка и на стили не влияет. Добавила исключение родителя для всех выборок.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var lis = document.getElementsByTagName('ul');
        for (i = 0; i < lis.length; i++) {           
// получить количество детей
            var parent = lis[0];
            var countImg = lis[i].getElementsByTagName('img').length;
            var childCount = lis[i].getElementsByTagName('ul').length;
            var childCountLi = lis[i].children.length;
            if (childCount >= 1 && countImg >= 1 && childCountLi <= 4) {
                lis[i].className = 'bigTab';
                parent.classList.remove("bigTab");
                parent.classList.add("sf-menu");
            }
            if (countImg <= 3 && childCountLi == 5) {
                lis[i].className = 'bigLageTab';
                parent.classList.remove("bigLageTab");
                parent.classList.add("sf-menu");
            }
            if (countImg == 4 && childCountLi <= 6) {
                lis[i].className = 'bigXLageTab';
                parent.classList.remove("bigXLageTab");
                parent.classList.add("sf-menu");
            }
            if (childCountLi >= 7) {
                lis[i].classList.add("noImg");
                lis[i].style.backgroundColor = 'red';
                parent.classList.remove("noImg");
                parent.classList.add("sf-menu");
            }
            if (countImg === 0) {
                lis[i].className = 'noImg';
                parent.classList.remove("noImg");
                parent.classList.add("sf-menu");
            }            
        }

Добавлено через 9 часов 13 минут
Да, и структура кода, конечно такая ,как поправил mrtoxas, что-то я тогда заработалась

Добавлено через 19 часов 52 минуты
Тут, я сама с собой общаюсь, но всё равно помогает.Пришлось переписать код, так как я выборку из ul сделала из всего ДОМа, и код переписывал классы и у ul не из меню

Теперь вроде правильно работает.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var lis = document.querySelector('.sf-menu').children;
        for (i = 0; i < lis.length; i++) {
// получить количество детей
            var childUl = lis[i].querySelectorAll('ul');
            var childCountUl = childUl.length;
            for (j = 0; j < childCountUl; j++) {
                var countImg = childUl[0].getElementsByTagName('img').length;
                var childCountLi = childUl[0].children.length;
                childUl[0].style.background = 'red';
 
                if (countImg >= 1 && childCountLi <= 4) {
                    childUl[0].className = 'bigTab';
                }
                if (countImg <= 3 && childCountLi == 5) {
                    childUl[0].className = 'bigLageTab';
 
                }
                if (countImg == 4 && childCountLi <= 6) {
                    childUl[i].className = 'bigXLageTab';
 
                }
                if (childCountLi >= 7) {
                    childUl[0].classList.add("noImg");
                    childUl[0].style.backgroundColor = 'red';
 
                }
                if (countImg === 0) {
                    childUl[0].className = 'noImg';
                }
              
            }
        }

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .