Заставьте jQuery сопоставлять div с обоими тегами класса, а не только с одним

Question

Если у меня есть этот HTML

<ul class="link color">...</ul>

и jQuery:

$(".link li").click(function(){
    //do stuff
});

или

$(".color li").click(function(){
    //do stuff
});

отлично работает.

Но я хочу запускать только тогда, когда у класса ОБА и ссылка. Как я могу сказать jQuery запуск только на обоих существующих, так как это не работает:

$(".link .color li").click(function(){
    //do stuff
});

Answer 1

$(".link.color li").click(function(){
    //do stuff
});

Причина, по которой $(".link .color li") не выбирает его, заключается в том, что он пытается захватить все li, являющиеся потомками класса, которые являются потомками класса link. Когда вы помещаете туда пробелы, это заканчивается тем, что он работает вниз по DOM, но когда вы помещаете селекторы рядом друг с другом, он захватывает только те, которые соответствуют всем селекторам.

Answer 2

Проблема возникает из-за пробела, который вы помещаете между двумя именами классов в вашем селекторе. Просто сложите их вместе без пробелов.

Пишем так:

$(".link .color li")

Вы получите children с именем класса "color" родительского тега с классом "link". Но написать это так:

$(".link.color li")

Вы можете получить тег с классом «color» и «link»

Answer 3

$(".color li, .link li").something.... //has one or the other
$(".color.link li").something.... //has both