Почему берет одну запись по селектору?

Question

[mihailos]

Всем привет
Я пытаюсь достать по атрибуту role все записи и проверить, есть ли дочерний элемент с классом "fraud", и в случае нахождения изменять у элемента с атрибутом role background-color.
Но проблема в том, что по атрибуту role querySelectorAll достает только один элемент (из тега )
код:

var rows = document.querySelectorAll('[role="row"]');

    rows.forEach(row => {
        if(row.querySelector('.fraud')) {
            row.style.backgroundColor = "#f1f7bc";
        }
    });

Структура:


Как можно исправить эту проблему?

Comments

[0xD34F]

3.4, 3.8

[Сергей delphinpro]

да вроде всё правильно

[Lynn «Кофеман»]

Ставлю пять копеек что таблица заполняется динамически и на момент выполнения скрипта в ней нет ничего кроме заголовка.

[imko]

Ой ужас а зачем еще и классы четности

[My1Name]

Принципиально vanilla, или jQuery тоже норм? На жуйкури будет более правильно взять <tbody> Ещё лучше с id и добавить проверку через contains.

Answer 1

[Aetae]

Для самого свежего хрома можно обойтись css:

[role="row"]:has(.fraud) {
  background-color: #f1f7bc;
}

Для иных браузеров можно использовать такую извращенную классику(с оговорками):

[role="row"] {
  position: relative;
  background-color: transparent;
}
[role="row"] .fraud::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f1f7bc;
}

Ну либо использовать MutationObserver и следить за появлением новых [role="row"].

Answer 2

[My1Name]

Если JavaScript не принципиально, то на jQuery это можно сделать так:
$('.fraud').css('backgroundColor' , '#f1f7bc');
Предварительно, желательно добавить к <tbody> id чтоб ограничить область селектора на тот случай, если у вас не одна таблица... Например: <tbody id="123"> Тогда запись будет выглядеть вот так:

$('#123').find('.fraud').css('background-color', '#f1f7bc');