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

Question

[FrelFrloich]

Добрый вечер, имеется задача, при нажатии на кнопку получать текст из .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;

Answer 1

[dollar]

Зачем forEach? Можно как-то так:

while (el.className !== "parent") el = el.parentNode;
if (el) { ......

Comments

[FrelFrloich]

я js мягко скажем знаю плохо, по этой причине и такого рода вопросы.

Answer 2

[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.

Comments

[FrelFrloich]

Спасибо большое, вы очень помогли, самостоятельно я бы не смог решить такого рода задачу.

[Дмитрий Беляев]

jumpUp22, dollar, FrelFrloich, className содержит строку со всеми классами элемента, появится новый класс на элементе и все сломается.
К тому же для этого есть нативный метод: https://developer.mozilla.org/ru/docs/Web/API/Elem...

P.S.

el.className != 'parent'

зачем здесь сравнение с приведением типов?

[FrelFrloich]

Дмитрий Беляев, новый класс не появиться, я верстальщик)

[Дмитрий Беляев]

FrelFrloich, рад за Вас, вот только требования иногда могут меняться