Выберите элемент, когда имя класса начинается с определенного слова

Question

Предположим, у меня есть элементы как показано ниже:

<div class="home">
    <div class="tab231891230"></div>
    <div class="tab121232441"></div>
    <div class="tab123134545"></div>
</div>

Как я могу использовать jQuery для выбора элемента div, с которого начинается класс "tab"?

Answer 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

Answer 2

Если у вас есть несколько классов внутри одного элемента, используйте это, чтобы выбрать

$("[class*='tab']");

Он будет работать с таким элементом

<div class="home">
<div class="module tab231891230"></div>
<div class="module tab121232441"></div>
<div class="module tab123134545"></div>

Ссылка: Селектор атрибутов jquery

Answer 3

Вы можете сделать это так:

$('div[class^="tab"]');

См. http://api.jquery.com/attribute-starts-with-selector/

Answer 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 "class:

<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/