Question

假设我有以下元素：

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

如何使用jQuery选择类以"tab"开头的div元素？

Answer 1

它被称为Attribute Starts With Selector。我的示例在元素上设置了红色文本颜色：

$('[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 attribute-contains selector

Answer 3

你可以这样做：

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

请参阅http://api.jquery.com/attribute-starts-with-selector/

Answer 4

选择具有已知前缀的类的正确方法：

[class^="tab"], [class*=" tab"]

_{PS：即使您只需要一个 CSS 选择器，也使用相同的方法！}

以上将确保针对这两种情况："tab123 xyz" 和 "xyz tab123"

使用安全分隔符

如果可能，引入一个像破折号这样的安全分隔符 - 即："tab-123 xyz", "xyz tab-123"
比你的选择器更安全[class^="tab-"], [class*=" tab-"]

Answer 5

为什么要用它？那个号码，您可以分配给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>

然后，只需按照上面的jQuery示例中的“tab”类进行选择，并为第二堂课做任何你想做的事（检查它是否在那里，删除它。）

检查这些：

http://api.jquery.com/class-selector/

http://api.jquery.com/hasClass/

http://api.jquery.com/addClass/

http://api.jquery.com/removeClass/

当类名以某个单词开头时选择一个元素

5 个答案:

使用安全分隔符