Как выбрать элемент с несколькими классами в порядке

Question

Я хочу выделить все элементы, которые имеют два класса, a и b, в таком порядке.

<element class="a b"> 

Когда я использую $ (". A + .b"), я получаю элементы с обоими классами в любом порядке. Мне нужны только те элементы с классом = "a b" и не class = "b a". У меня такая же проблема, когда я использую jQuery для getElementsByClassName.

Примечание. Причина, по которой я должен указать порядок, заключается в том, что некоторые из div в моем документе имеют класс = «a b», а некоторые имеют «b a». , , Я хочу только выбрать те, у кого есть «a». Документ не структурирован элегантно, но это не под моим контролем.

Answer 1

Если эти элементы не имеют никаких других классов, вы можете выбрать их по атрибуту

$('[class="a b"]') 

Там также атрибуты-старты-с и-концов, с селектором, а атрибут-содержит селектор, который будет подобрать элементы, даже если они имеют больше классов

$('[class*="a b"]') 

примечание: это будет также соответствовать ...class="what a bad idea"

Plain JS поддерживает селектор атрибутов в querySelector[All]

Но это плохая идея, не имеет значения, в каком порядке находятся классы, и если это так, вы делаете что-то неправильно.

Answer 2

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

Однако, чтобы ответить на ваш вопрос, вам понадобится нечто вроде регулярных выражений.

$('*').filter(function() { return /\ba\b.*\bb\b/.test(this.className); }); 

[Редактировать]

Это более щадящая, если есть какой-то шанс других классов между а и Ь. Однако, как показывает ответ Аданео, если вы уверены, что будут только эти два, вы можете просто использовать селектор атрибутов, как он демонстрирует.

Answer 3

Если другие классы участвуют также можно использовать filter()

$(".a.b").filter(function(){ 
    return this.className.indexOf('a b')>-1; 
}) 

Answer 4

Здесь вы можете увидеть JSFiddle: https://jsfiddle.net/d002g7n8/1/

$('.a.b') 

    .filter(function(){ 

     return this.classList[0] == 'a' && this.classList[1] == 'b'; 

    }) 
    .addClass('selection'); 

Мы сначала выбрать элементы, а затем фильтровать те, которые имеют класс «а 'в первую очередь и класс' b 'на втором месте.

Answer 5

Селектор $ (". A +.б ") для второго элемента с классом b такого DOM:

<element class="a"> 
<element class="b"> 

или это:

<element class="a b"> 
<element class="a b"> 

О селекторе +: http://www.w3schools.com/cssreF/sel_element_pluss.asp

Для вашего вопроса, вы можете использовать этот селектор с фильтром :

$('.a.b').filter(function() { 
    return $(this).attr('class') == 'a b'; 
})