Выберите элемент, когда имя класса начинается с определенного слова
Предположим, что у меня есть следующие элементы:
<div class="home">
<div class="tab231891230"></div>
<div class="tab121232441"></div>
<div class="tab123134545"></div>
</div>
Как я могу использовать jQuery для выбора элемента div, который начинается с класса "tab"
?
Ответы
Ответ 1
Он называется Атрибут начинается с селектора. Мой пример устанавливает красный цвет текста для элементов:
$('[class^="tab"]').css('color', 'red');
jsFiddle Demo
Обратите внимание, что если элементы имеют более одного класса, а другой - tab
внутри (class="nyedva tab231891230"
), этот элемент не будет выбран этим селектором.
Если вы хотите выбрать даже эти, вы можете использовать этот пример:
$('.home div').filter(function () {
return this.className.match(/\btab/);
}).css('color', 'red');
jsFiddle Demo
Ответ 2
Если у вас есть несколько классов внутри одного элемента, используйте это, чтобы выбрать
$("[class*='tab']");
Он будет работать с элементом вроде этого
<div class="home">
<div class="module tab231891230"></div>
<div class="module tab121232441"></div>
<div class="module tab123134545"></div>
Ссылка: атрибут jquery - содержит селектор
Ответ 3
Вы можете сделать это следующим образом:
$('div[class^="tab"]');
См. http://api.jquery.com/attribute-starts-with-selector/
Ответ 4
зачем это использовать? это число, вы можете назначить атрибуту rel или id, например:
<div class="home">
<div class="tab" rel="231891230"></div>
<div class="tab" rel="121232441"></div>
<div class="tab" rel="123134545"></div>
</div>
тогда он будет доступен:
$('div.tab').click(yourhandler);
или даже, добавьте подкласс этого текущего класса "tab":
<div class="home">
<div class="tab 231891230"></div>
<div class="tab 121232441"></div>
<div class="tab 123134545"></div>
</div>
тогда просто выберите класс "tab", как в примере jQuery выше,
и делайте все, что захотите, со вторым классом (проверьте, есть ли он там,
удалите его).
проверьте:
http://api.jquery.com/class-selector/
http://api.jquery.com/hasClass/
http://api.jquery.com/addClass/
http://api.jquery.com/removeClass/