Определить номер элемента списка ul.li и присвоить класс

@Gotcha · Регистрация: 13.07.2013

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

Приветствую друзья.
Помогите решить задачку пожалуйста.

Есть список элементов (меню).

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<ul class="menu">           
    <li class="submenu">
        <ul class="submenu_ul">
            <li class="submenu_li">1</li>
            <li class="submenu_li">2</li>
           <li class="submenu_li">3</li>
            <li class="submenu_li">4</li>
        </ul>
    </li>
                   
    <li class="submenu"> 
        <ul class="submenu_ul">
            <li class="submenu_li">1</li>
            <li class="submenu_li">2</li>
            <li class="submenu_li">3</li>
            <li class="submenu_li">4</li>
            <li class="submenu_li">5</li>
        </ul>
    </li>                            
</ul>

Задача: применить класс (.hide) к элементам после 2-го в каждой подгруппе (submenu_ul).
Решал так: вычислил номер элемента

JavaScript
1
2
var count_block = $('.submenu_lii').length;
 var number_blocks = 2;

и далее, присвоил класс каждому после него:

JavaScript
1
2
3
4
5
6
$('.submenu_li').each(function(i,n){
         $('submenu_li').addClass(i);
         if(i> number_blocks) {
         $(this).addClass('hide_menu').hide();
         }
     });

Но проблема в том, что .hide применился, как догадываетесь, вообще ко всем последующим элементам)
Вопрос: как сделать, чтобы в каждой из подгрупп (submenu_ul) к первым двум элементам всё таки не присваивался класс?
Спасибо!)

@Padonak · 29.12.2022, 22:02

Когда понравился forEach:

PHP/HTML
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
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
    .hide{
    color: crimson;
    font-weight: bold;
    }
    </style>
  </head>
  <body>    
    <ul class="menu">           
    <li class="submenu">
        <ul class="submenu_ul">
            <li class="submenu_li">1</li>
            <li class="submenu_li">2</li>
           <li class="submenu_li">3</li>
            <li class="submenu_li">4</li>
        </ul>
    </li>
                   
    <li class="submenu"> 
        <ul class="submenu_ul">
            <li class="submenu_li">1</li>
            <li class="submenu_li">2</li>
            <li class="submenu_li">3</li>
            <li class="submenu_li">4</li>
            <li class="submenu_li">5</li>
        </ul>
    </li>                            
</ul>
<script>
   /*
   Задача: применить класс (.hide) к элементам после 2-го в каждой подгруппе (submenu_ul).
   */
   [...document.querySelectorAll('.submenu_ul')].forEach( x => [...x.querySelectorAll('.submenu_li')].filter( (z, i) => i > 1).forEach(k => k.classList.add('hide')) );
   
   </script>
  </body>
</html>

@klyapa · 29.12.2022, 22:07

JavaScript
1
2
3
4
5
$('.submenu_ul').each(function () {
    $(this).children().slice(2).each(function () {
        $(this).addClass('hide');
    });
});

@mr_dramm · 29.12.2022, 22:50

PHP/HTML
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
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
 
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
 
    .hide {
        display: none;
    }
    </style>
</head>
 
<body>
    <ul class="menu">
        <li class="submenu">
            <ul class="submenu_ul">
                <li class="submenu_li">1</li>
                <li class="submenu_li">2</li>
                <li class="submenu_li">3</li>
                <li class="submenu_li">4</li>
            </ul>
        </li>
        <li class="submenu">
            <ul class="submenu_ul">
                <li class="submenu_li">1</li>
                <li class="submenu_li">2</li>
                <li class="submenu_li">3</li>
                <li class="submenu_li">4</li>
                <li class="submenu_li">5</li>
            </ul>
        </li>
    </ul>
    <script>
    document.querySelectorAll(".menu .submenu_ul .submenu_li:nth-child(1n+3)")
        .forEach(e => e.classList.add("hide"))
    </script>
</body>
 
</html>

Можно задать несколько разных субменю

JavaScript
1
document.querySelectorAll(".menu .submenu_ul .submenu_li:nth-child(1n+3), .menu .submenu_ul2 .submenu_li:nth-child(1n+3), .menu .submenu_ul3 .submenu_li:nth-child(1n+3)")

@Gotcha · 31.12.2022, 16:03 **[ТС]**

Сообщение от Padonak

Когда понравился forEach:

С forEach ещё не успел подружиться потому как начал освоение скрипто-писания с jquery)

Спасибо вам, уважаемые mr_dramm, Padonak, klyapa за помощь!
Все три варианта применил и получил отличный результат. Осмыслить пока смог только 2-й (с методом slice).

Пользуясь случаем, позвольте поздравить с Наступающим Новым Годом!

@klyapa · 31.12.2022, 16:20

Сообщение от Gotcha

начал освоение скрипто-писания с jquery)

В свете расширения сознания скрипто-писания с jquery) ...
Gotcha, конструкцию...

JavaScript
1
$(this).children().slice(2)

... можно заменить на аналогичную, которая выдаст тот же результат ...

JavaScript
1
$(this).find('li:gt(1)')

И вас с наступающим!

@Codera · 02.05.2023, 14:25

Очень пригодилось решение от klyapa.

Подскажите, как добавить к каждому массиву .submenu_ul кнопку с методом remove("hide"), чтобы проявились остальные элементы одного из массивов .submenu_ul?

Спасибо!

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@Codera 14 / 11 / 5 Регистрация: 31.12.2022 Сообщений: 56
	02.05.2023, 14:25
	Очень пригодилось решение от klyapa. Подскажите, как добавить к каждому массиву `.submenu_ul` кнопку с методом `remove("hide")`, чтобы проявились остальные элементы одного из массивов `.submenu_ul`? Спасибо! 0

Определить номер элемента списка ul.li и присвоить класс

Решение