I have a schedule of games. It is necessary to highlight the entire line with time and result. While only the cell is highlighted. Need to add something in the syntax of the arrow function

// Слово для поиска let word = 'Зубило'.toLowerCase(); // Перебираем все строки Array.from(document.querySelectorAll('span.teams')).forEach(e => // Если в строке есть заданное слово - добавляем класс строке e.innerHTML.toLowerCase().includes(word) ? e.classList.add('highlight') : null ); 
 .highlight { background-color: #f6ceab; } 
 <div class="event"> <span class="time">18:00</span> <span class="teams">Спартак – Динамо</span> <span class="result-left">2</span>: <span class="result-right">1</span> </div> <div class="event"> <span class="time">19:00</span> <span class="teams">Зубило – Метеор</span> <span class="result-left">1</span>: <span class="result-right">1</span> </div> <div class="event"> <span class="time">20:00</span> <span class="teams">Вымпел – Зоркий</span> <span class="result-left">1</span>: <span class="result-right">3</span> </div>

    1 answer 1

    To get the parent element, you can use the methods: parentNode , parentElement .

    For example:

     // Слово для поиска let word = 'Зубило'.toLowerCase(); // Перебираем все строки Array.from(document.querySelectorAll('span.teams')).forEach(el => { // Если в строке есть заданное слово - добавляем класс строке if (el.innerHTML.toLowerCase().includes(word)) { el.parentNode.classList.add('highlight'); } }); 
     .highlight { background-color: #f6ceab; } 
     <div class="event"> <span class="time">18:00</span> <span class="teams">Спартак – Динамо</span> <span class="result-left">2</span>: <span class="result-right">1</span> </div> <div class="event"> <span class="time">19:00</span> <span class="teams">Зубило – Метеор</span> <span class="result-left">1</span>: <span class="result-right">1</span> </div> <div class="event"> <span class="time">20:00</span> <span class="teams">Вымпел – Зоркий</span> <span class="result-left">1</span>: <span class="result-right">3</span> </div>