querySelectorAll для элемента, содержащего определенный класс

Question

querySelectorAll для элемента, содержащего определенный класс

1

У меня есть несколько div, которые содержат два класса, таких как:

<div class="dateNumbers"></div>
<div class="dateNumbers {{month.year + '-' + month.monthName + '-' + 'end'}}"></div>
<div class="dateNumbers {{month.year + '-' + month.monthName + '-' + 'end'}}"></div>
<div class="dateNumbers {{month.year + '-' + month.monthName + '-' + 'end'}}"></div>

где {{month.year + '-' + month.monthName + '-' + 'end'}} в течение определенного месяца - 2018-August-end

Я хочу выбрать divs, которые содержат только 2018-August-end который я храню в переменной, поэтому я попробовал что-то вроде этого

var dataName = '2018-August-end'; // this is dynamic but for this example I have it static

document.querySelectorAll( "." + dataName);

но я получаю эту ошибку

Uncaught DOMException: Не удалось выполнить 'querySelectorAll' в 'Document': '.2018-August-end' не является допустимым селектором. по адресу: 1:10

это почему?

Спасибо

sam jackson 15 авг. 2018, в 18:47

Источник

0

классы не должны начинаться с цифры, попробуйте добавить символ перед
Mohd_PH 15 авг. 2018, в 16:29
0

Не дубликат, но смотрите здесь: stackoverflow.com/questions/448981/…
Fissure King 15 авг. 2018, в 16:31
0

@Mohd_PH Спасибо!
sam jackson 15 авг. 2018, в 16:43
0

@FissureKing Спасибо!
sam jackson 15 авг. 2018, в 16:43

Показать ещё 2 комментария

Теги:

javascript

dom

selectors-api

1 ответ

Ещё вопросы

классы не должны начинаться с цифры, попробуйте добавить символ перед
Не дубликат, но смотрите здесь: stackoverflow.com/questions/448981/…

T.J. Crowder · Accepted Answer · 2018-08-15T15-13-00.000Z

Селекторы классов (.) Класса не могут начинаться с неэкранированной цифры (2, в вашем случае).

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

Пример:

const datePart = "x2018-August-end";
console.log(
  document.querySelectorAll(".\\" + datePart).length
);

<div class="dateNumbers"></div>
<div class="dateNumbers x2018-August-end"></div>
<div class="dateNumbers x2018-August-end"></div>
<div class="dateNumbers x2018-August-end"></div>

В качестве альтернативы вы можете использовать нотацию [class~=value], которая функционально идентична (для HTML):

document.querySelectorAll("[class~='" + datePart + "']")

Пример:

const datePart = "2018-August-end";
console.log(
  document.querySelectorAll("[class~='" + datePart + "']").length
);

<div class="dateNumbers"></div>
<div class="dateNumbers 2018-August-end"></div>
<div class="dateNumbers 2018-August-end"></div>
<div class="dateNumbers 2018-August-end"></div>

Также можно избежать первой цифры . но это больно. (Вы не можете просто бросить обратную косую черту перед ним, как вы можете с некоторыми библиотеками, такими как jQuery.)