0

Есть список

                        <div class="flexcontent">   
                            <div class="windowmenulist" id="menulist">
                                    <div class="menulistitem">
                                        Смартфоны и гаджеты
                                    </div>
                                    <div class="menulistitem">
                                        Ноутбуки и компьютеры
                                    </div>
                                    <div class="menulistitem">
                                        Телевизоры, аудио-видео, Hi-Fi
                                    </div>
                                    <div class="menulistitem">
                                        Бытовая техника для дома и кухни
                                    </div>
                                    <div class="menulistitem">
                                        Строительство и ремонт
                                    </div>
                                    <div class="menulistitem">
                                        Дом и дача
                                    </div>
                                    <div class="menulistitem">
                                        Фото, видео, системы безопасности
                                    </div>
                                    <div class="menulistitem">
                                        Автотовары
                                    </div>
                                    <div class="menulistitem">
                                        Канцтовары, Мебель и Офисная техника
                                    </div>
                                    <div class="menulistitem">
                                        Красота и здоровье
                                    </div>
                                    <div class="menulistitem">
                                        Спорт и отдых
                                    </div>
                                    <div class="menulistitem">
                                        Товары для геймеров
                                    </div>
                                    <div class="menulistitem">
                                        Уцененные товары
                                    </div>
                                    <div class="menulistitem">
                                        Подарочные сертификаты
                                    </div>
                                    <div class="menulistitem">
                                        Сервисы и услуги
                                    </div>                                  
                            </div>
                            <!--
                            <div class="flexenabledscrollbar">
                        
                            </div>
                            -->
                        </div>

Как обратиться к элементу списка Смартфоны и гаджеты (просто к элементу списка document.querySelector('.menulistitem'), а как обратиться с учетом имени элемента списка - не знаю)?

5
  • почитай про data атрибуты или id 6 авг 2021 в 9:59
  • На практике обычно это так не делается, но вот здесь, для общего развития ответы на вопрос, аналогичный вашему: stackoverflow.com/questions/37098405/… 6 авг 2021 в 10:03
  • @AlexeyVladimirov а как делается? 6 авг 2021 в 10:07
  • @megafrontprogrammer как сказали выше, по (дата-)атрибуту или id, т.е. заранее позаботиться в HTML-коде, чтобы селекторы могли применяться к конкретному элементу. 6 авг 2021 в 10:15
  • этот код даст вам ошибку document.querySelector('.menulistitem') в случае с этой разметкой. Нужно использовать querySelectorAll 6 авг 2021 в 12:07

1 ответ 1

0

Можно найти по содержанию в elem.innerText.includes, если зачем-то, вам надо именно так. Но лучше как вам и рекомендуют, почитайте про дата-атрибут.

let menulistitems = document.querySelectorAll('.menulistitem');
for (let menulistitem of menulistitems) {
if (menulistitem.innerText.includes('Смартфоны и гаджеты')) {
menulistitem.style.color = 'red'
}
}
 <div class="flexcontent">   
                            <div class="windowmenulist" id="menulist">
                                    <div class="menulistitem">
                                        Смартфоны и гаджеты
                                    </div>
                                    <div class="menulistitem">
                                        Ноутбуки и компьютеры
                                    </div>
                                    <div class="menulistitem">
                                        Телевизоры, аудио-видео, Hi-Fi
                                    </div>
                                    <div class="menulistitem">
                                        Бытовая техника для дома и кухни
                                    </div>
                                    <div class="menulistitem">
                                        Строительство и ремонт
                                    </div>
                                    <div class="menulistitem">
                                        Дом и дача
                                    </div>
                                    <div class="menulistitem">
                                        Фото, видео, системы безопасности
                                    </div>
                                    <div class="menulistitem">
                                        Автотовары
                                    </div>
                                    <div class="menulistitem">
                                        Канцтовары, Мебель и Офисная техника
                                    </div>
                                    <div class="menulistitem">
                                        Красота и здоровье
                                    </div>
                                    <div class="menulistitem">
                                        Спорт и отдых
                                    </div>
                                    <div class="menulistitem">
                                        Товары для геймеров
                                    </div>
                                    <div class="menulistitem">
                                        Уцененные товары
                                    </div>
                                    <div class="menulistitem">
                                        Подарочные сертификаты
                                    </div>
                                    <div class="menulistitem">
                                        Сервисы и услуги
                                    </div>                                  
                            </div>
                            <!--
                            <div class="flexenabledscrollbar">
                        
                            </div>
                            -->
                        </div>

PS: разметка, которую вы указали выше, обычно делается через список ul>li. Сейчас, у вас, так называемая "дивянка".

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.