JQuery: Можно ли выбирать элементы только с одним классом из числа элементов с потенциально тремя классами?
Например, скажем, что у меня есть следующее:
<span class="a b c">Has class a, b, and c</span>
<span class="a">Has class a</span>
<span class="b c">Has class b and c</span>
<span class="a c">Has class a and c</span>
<span class="a c">Has class a and c</span>
<span class="a">Has class a</span>
Теперь предположим, что я хочу выбрать все элементы, которые имеют only класс a.
Значение будет выбрано только вторым и последним span
.
Есть ли простой способ сделать это?
Ответы
Ответ 1
$('.a').not('.b, .c')
Это выберет все элементы с классом a
, у которых нет b
или c
. Тем не менее, они все еще могут иметь класс d
, e
и т.д. Используйте ответ Фила, если вы действительно хотите только элементы без класса, отличного от a
.
Ответ 2
(см. ниже, почему вы, возможно, не захотите делать то, что задано в вопросе)
Вы можете использовать атрибут [class="a"]
"равно селектору", хотя он хрупкий:
$('span[class="a"]').hide();
Проблема в том, что если у вас есть какие-либо пробелы в атрибуте класса, это сломается. Смотрите эту скрипту: http://jsfiddle.net/c7DP7/
Вы можете исправить это, выполнив базовый запрос по этим элементам, используя обычный селектор классов, затем дополнительно отфильтруйте их, проверяя только a
(и обрезая пробелы в этом втором фильтре). Смотрите эту скрипту: http://jsfiddle.net/uD48E/1/
$('.a')
.filter(function(index){
return $(this).attr("class").trim() == "a";
})
.hide();
Вопрос выглядит так, будто он пытается сделать более "будущий доказательство", но этот конкретный подход более хрупкий. Отклонение всех классов, которые не связаны с текущим классом, который вы фильтруете, может портить вещи по причинам, не связанным с классом a
(например, несвязанный класс d
или e
, который добавляется позже). Это важно, если HTML-код, который вы применяете в jQuery, может быть изменен в будущем.
Лучший способ сделать это - отфильтровать только классы, которые влияют на значение класса a
. Предоставление такой гибкости - вот что делает ваш код более надежным в будущем. Подробнее о том, как это сделать, см. maxedison.
Ответ 3
Я полагаю, что если вы хотели сделать это, вы могли бы просто сделать:
var spans = $("span[class='a']");
Ответ 4
Другой метод - удалить эти классы, а затем проверить, остаются ли какие-либо классы. Если нет, выполните функцию:
JS Fiddle
$('.a').each(function () {
var $this = $(this);
if (!$this.removeClass('a').attr('class').length) {
//Execute function here
}
});