document.querySelectorAll(более одного набора данных);

Я пытаюсь использовать:

document.querySelectorAll('[data-r=0 data-c=0]');

выбрать определенный элемент HTML, но он возвращает:

Uncaught DOMException: не удалось выполнить 'querySelectorAll' для 'Document': '[data-r=0 data-c=0]' не является допустимым селектором.

Я пытаюсь понять почему. Разве это не запрос по 2 наборам данных одновременно? Все примеры, которые я нашел в Интернете, показывают только примеры querySelectorAll только с одним набором данных в них. Я пытаюсь избежать использования JQuery, есть ли способ?

    <table id="board">
        <tr>
            <td class="box" data-r=0 data-c=0></td>
            <td class="box" data-r=0 data-c=1></td>
            <td class="box" data-r=0 data-c=2></td>
        </tr>
        <tr>
            <td class="box" data-r=1 data-c=0></td>
            <td class="box" data-r=1 data-c=1></td>
            <td class="box" data-r=1 data-c=2></td>
            </tr>
        <tr>
            <td class="box" data-r=2 data-c=0></td>
            <td class="box" data-r=2 data-c=1></td>
            <td class="box" data-r=2 data-c=2></td>
        </tr>
    </table>
Источник

3 ответа

Решение

Прежде всего, вам нужно добавить кавычки, чтобы селектор мог быть действительным. Затем в зависимости от того, что вы действительно хотите выбрать, у вас есть два разных синтаксиса:

  • [data-r="0"][data-c="0"] выберет элементы, которые имеют data-r=0 А ТАКЖЕ data-c=0
  • [data-r="0"],[data-c="0"] выберет элементы, которые имеют data-r=0 ИЛИ ЖЕ data-c=0

Первое поведение довольно хорошо описано в стандартной документации. Второй просто список выбора. Конечно, вы можете объединить их. Например, вы можете выбрать диагональ таблицы, используя [data-r="0"][data-c="0"], [data-r="1"][data-c="1"], [data-r="2"][data-c="2"],

демонстрация 

// Matches 1 element
console.log(document.querySelectorAll('[data-r="0"][data-c="0"]'));

// Matches 5 elements
console.log(document.querySelectorAll('[data-r="0"],[data-c="0"]'));

// Matches the 3 diagonal elements
console.log(document.querySelectorAll('[data-r="0"][data-c="0"], [data-r="1"][data-c="1"], [data-r="2"][data-c="2"]'));
<table id="board">
    <tr>
        <td class="box" data-r=0 data-c=0></td>
        <td class="box" data-r=0 data-c=1></td>
        <td class="box" data-r=0 data-c=2></td>
    </tr>
    <tr>
        <td class="box" data-r=1 data-c=0></td>
        <td class="box" data-r=1 data-c=1></td>
        <td class="box" data-r=1 data-c=2></td>
        </tr>
    <tr>
        <td class="box" data-r=2 data-c=0></td>
        <td class="box" data-r=2 data-c=1></td>
        <td class="box" data-r=2 data-c=2></td>
    </tr>
</table>

Источник

Поместите ваши данные-r=0 в '' (цитаты)

 <td class="box" data-r='0' data-c='0'></td>

и использовать

document.querySelectorAll("[data-r='0'][data-c='0']");

не забудьте поместить значение атрибута в '' в querySelector

Источник

[data-r=0],[data-c=0] должно сработать.

Источник
Другие вопросы по тегам