Подобные JQuery селекторы действуют по-разному - PullRequest
Новая
       3

Подобные JQuery селекторы действуют по-разному

1 голос
/ 06 января 2020

У меня есть страница с 10 div, которые содержат класс "topic_t". Код ниже: 

console.log(jQuery(".topic_t").length);
console.log(jQuery('*[class="topic_t"]').length);

дает результат: 

10
0


console.log(jQuery(".topic_t").length);
console.log(jQuery('*[class="topic_t"]').length);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="apple baker charly topic_a topic_t"></div>
<div class="apple baker charly topic_a topic_t"></div>
<div class="apple baker charly topic_a topic_t"></div>
<div class="apple baker charly topic_a topic_t"></div>
<div class="apple baker charly topic_a topic_t"></div>
<div class="apple baker charly topic_a topic_t"></div>
<div class="apple baker charly topic_a topic_t"></div>
<div class="apple baker charly topic_a topic_t"></div>
<div class="apple baker charly topic_a topic_t"></div>
<div class="apple baker charly topic_a topic_t"></div>

Почему второй селектор jquery не находит ни одного из элементов div? Например, мои div определены как: 

<div class="apple baker charly topic_a topic_t">

Ответы [ 2 ]

3 голосов
/ 06 января 2020

Синтаксис [attributeName="attributeValue"] выберет элементы, которые имеют attributeName точно attributeValue.

*[class="topic_t"] выберет любой элемент, атрибут класса которого точно topic_t , Напротив, когда вы используете синтаксис . для выбора класса, он выберет любой элемент, имеющий эту подстроку класса внутри разделенного пробелами списка классов (в атрибуте class).

Таким образом, использование . для выбора элементов с определенным классом, как правило, более надежно (и короче), особенно если могут существовать и другие классы.

1 голос
/ 06 января 2020

Потому что class="topic_t" означает выбрать любые элементы с атрибутом класса, равным "topic_t". Это не означает, что нужно выбирать элементы с атрибутом класса, который включает класс "topic_t":

Например, следующее работает, поскольку атрибут класса вашего div установлен на "topic_t": 

console.log(jQuery('*[class="topic_t"]').length);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="topic_t"></div>

Если вместо этого вы используете селектор содержимого (~=), он будет работать должным образом (что ведет себя аналогично селектору .class): 

console.log(jQuery('*[class~="topic_t"]').length);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="apple baker charly topic_a topic_t"></div>
...