@FrelFrloich

Как перебрать дочерние элементы внутри цикла forEach?

Добрый вечер, имеется задача, при нажатии на кнопку получать текст из .parent__text и вставлять в val инпута, загвоздка в том что количество кнопок .parent__btn в .parent__list может варьироваться не известно в каком количестве, но parent__text у .parent всегда один. Для меня это является весьма сложной задачей, надеюсь на помощь.

Пример вёрстки
<div class="container">
    <div class="parent">
        <div class="parent__text">Получить 1</div>
    
        <ul class="parent__list">
            <li class="parent__item">
                <button class="parent__btn"></button>
            </li>
            <li class="parent__item">
                <button class="parent__btn"></button>
            </li>
            <li class="parent__item">
                <button class="parent__btn"></button>
            </li>
        </ul>
    </div>
    
    <div class="parent">
        <div class="parent__text">Получить 2</div>
    
        <ul class="parent__list">
            <li class="parent__item">
                <button class="parent__btn"></button>
            </li>
        </ul>
    </div>
    
    <div class="parent">
        <div class="parent__text">Получить 2</div>
    
        <ul class="parent__list">
            <li class="parent__item">
                <button class="parent__btn"></button>
            </li>
            <li class="parent__item">
                <button class="parent__btn"></button>
            </li>
            <li class="parent__item">
                <button class="parent__btn"></button>
            </li>
            <li class="parent__item">
                <button class="parent__btn"></button>
            </li>
            <li class="parent__item">
                <button class="parent__btn"></button>
            </li>
        </ul>
    </div>  
 </div>


const btn = document.querySelectorAll("parent__btn");
const parent = document.querySelectorAll("parent");

const btnText = parent.textContent;
  • Вопрос задан
  • 90 просмотров
Решения вопроса 2
dollar
@dollar
Делай добро и бросай его в воду.
Зачем forEach? Можно как-то так:
while (el.className !== "parent") el = el.parentNode;
if (el) { ......
Ответ написан
@jumpUp22
Вам правильно выше посоветовали. Начал придумывать код с forEach и незаметно сам пришёл к варианту автора выше с while.

Всё таки приложу полностью код:

const btn = document.querySelectorAll(".parent__btn");
const parent = document.querySelectorAll(".parent");

const btnsArray = Array.from(btn);   // Превращаем коллекцию типа NodeList в массив
 
 btnsArray.forEach(b => {   // устанавливаем обработчики на кнопки
	b.addEventListener('click', listener);
 });

function listener(event) {
	let el = event.target;
	
	while (el.className != 'parent') {   // код автора предыдущего комментария
		el = el.parentNode;
	}
	
	if (el) {
           const parent = el.querySelector('.parent__text');
           const btnText = parent.textContent;
           console.log(btnText);   // текст нужной ноды
	}
 }


Здесь forEach используется только для установки обработчиков на кнопках.
Конечно, можно сделать и поиск нужного элемента через forEach (и filter), возможно, как то ещё. Но работать будет быстрее первый вариант с while.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
07 дек. 2021, в 22:07
50000 руб./за проект
07 дек. 2021, в 21:54
1500 руб./за проект
07 дек. 2021, в 21:40
15000 руб./за проект