jQuery：如何选择具有特定类的元素？

Question

HTML的写法如下：

<span class="someClass position1" >span1</span>
<span class="someClass" >span2</span>
<span class="someClass" >span3</span>
<span class="someClass position2" >span4</span>
<span class="someClass" >span5</span>
<span class="someClass position4" >span6</span>
<span class="someClass position10" >span7</span>
<span class="someClass" >span8</span>
<span class="someClass position12" >span9</span>

现在，使用jQuery，我如何仅更改具有类position+某个整数的元素的backgroundColor？

我想选择所有类为position+相应整数的元素。

- Navneet Saini

---

你是只想针对一个特定的整数（那会很容易），还是针对每个可能的整数都想要这样做？ - John Dvorak

不，我想选择所有具有position+一些整数的类。 - Navneet Saini

@JanDvorak 每个可能的整数。 - Navneet Saini

请查看以下网址以获取解决方案：http://api.jquery.com/category/selectors/attribute-selectors/ - sangram parmar

Answer 1

我假设你想改变所有具有与该模式匹配的类的元素的背景 - 而不仅仅是一个特定的数字。

可能有一种“hacky”的方法可以将class视为另一个属性，并对值进行部分匹配。

然而，更好的解决方案是添加另一个可选择的类。或许可以让添加positionX类的东西同时添加positioned类。

- jcsanyi

---

作为额外说明：如果您使用了一个positioned类，您可以直接使用CSS样式表来设置背景颜色。 - LeGEC

Answer 2

试试这个:

$('.someClass').filter(function () {
    return /(\s|^)position[0-9]+(\s|$)/.test(this.className);
}).css('background-color', 'silver');

实现代码

您只需修改正则表达式即可获得完美的结果 :)

- Mr_Green

---

我建议添加一个类而不是直接设置背景颜色。 - jcsanyi

position12怎么样？position1A呢？ - John Dvorak

@JanDvorak 我刚给了OP一个想法。他/她可以更新正则表达式来获得完美的结果。我在帖子中提到了这一点。 :) - Mr_Green

@Mr_Green 的“hack”是指使用错误的工具（例如正则表达式，而不是添加类）。 - John Dvorak

@Mr_Green 这可能是按照书面方式回答问题的最佳方法，但它仍然将“class”视为属性，并针对其进行文本匹配，而不是按照类应有的方式使用类。 - jcsanyi

Answer 3

$(".someClass").each(function(){
    var classes = $(this).attr('class').split(/\s+/);
    for (var i = 0; i < classes.length; ++i)
    {
        if (classes[i].match(/^position\d+$/i)) {
            $(this).css('background-color', 'red');
        }
    }
});

如果必须这样做，对于任何包含类名为positionN（其中N是任意整数）和someClass的元素。

http://jsfiddle.net/ysUMs/2/

- luiges90

---

有点hacky，但很严谨 :-) - John Dvorak

+1 如果你必须这样做。与下面出现的大多数hacky解决方案不同，这个解决方案应该实际有效。 - jcsanyi

我建议添加一个类而不是直接设置背景颜色。 - jcsanyi

Answer 4

尝试以下选择器：

$("span:regex(class, (\s|^)position[0-9]+(\s|$))").css("background-color", "Green");

更多参考，请查看编写一个jQuery选择器来选择某个模式的类

对于regex选择器，您需要编写以下代码：

jQuery.expr[':'].regex = function(elem, index, match) {
    var matchParams = match[3].split(','),
    validLabels = /^(data|css):/,
    attr = {
        method: matchParams[0].match(validLabels) ? 
                    matchParams[0].split(':')[0] : 'attr',
        property: matchParams.shift().replace(validLabels,'')
    },
    regexFlags = 'ig',
    regex = new RegExp(matchParams.join('').replace(/^\s+|\s+$/g,''), regexFlags);
    return regex.test(jQuery(elem)[attr.method](attr.property));
}

这是由 James Padolsey 提供的 精彩实现。

查看工作示例：http://jsfiddle.net/Q7fTW/16/

- Sanjeev Rai

---

我在jQuery文档中找不到任何:regex选择器。你提供的答案是指需要在使用之前包含特定插件：http://james.padolsey.com/javascript/regex-selector-for-jquery/ - John Dvorak

你需要为 regex 选择器添加定义。请查看我的编辑后的代码。 - Sanjeev Rai

我对这个自定义正则表达式选择器的了解不够，无法权威地发表评论，但我怀疑这个写法是不起作用的。如果你是在匹配类属性，为什么要使用“.”？你如何防止选择“positioning”类？如果“position”是属性值中的第一个类，会发生什么？如果它不是第一个呢？ - jcsanyi

@SanjeevRai 仍然不对。/position*/ 匹配 positio、position、positionnnnn 等等。这将找到任何类列表中包含 positio 的元素。 - John Dvorak

@Jan Dvorak，我对正则表达式没有太多的了解，你能修改一下正则表达式的部分吗？ - Sanjeev Rai

Answer 5

$(".position" + someINTEGER).css('backgroundColor','your color');

编辑：

你提出的问题有些令人困惑。

要识别具有类position + Integer的元素，您需要为它们指定另一个类以进行识别。

<span class="someClass integerclass position1" >span1</span>
<span class="someClass integerclass position2" >span4</span>

$(".integerclass).css('backgroundColor','your color');

- Mandeep Jain

---

someINTEGER 是什么？ - Navneet Saini

@NavneetSaini 我以为你有一个？ - John Dvorak

你想要放置的整数，例如 $(".position" + 1)。 - Mandeep Jain

Answer 6

你也可以尝试这个：

<script type="text/javascript">
    $(function(){
        if( $(".someClass").hasClass(".position"+NUMBER) ){
            $(this).css({ 'backgroundColor','your color' });
        } 
    });
</script>

- Nil'z

---

hasClass 对于一个集合并不像你想的那样工作，而 $(this) 也不是你在使用时认为的那样。 - John Dvorak

Answer 7

试一下

它正常工作

    $('[class^="someClass position"]').css({ 'background-color': 'red' })
    //Selects elements that have the specified attribute with a value beginning exactly with a given string.

或者

    $('[class*="position"]').css({ 'background-color': 'red' })
    //Selects elements that have the specified attribute with a value containing the a given substring.

或者

    $('[class^="someClass"][class*=" position"]').css({ 'background-color': 'red' })
    //Matches elements that match all of the specified attribute filters.

参考

http://api.jquery.com/category/selectors/attribute-selectors/

- sangram parmar

---

这也将匹配任何具有positioned或notpositioned或needsposition类的内容。 - jcsanyi

尝试使用其中任何一个来满足解决此问题的要求。 - sangram parmar

问题在于当动态添加/删除类时，无法保证这些类以何种顺序出现在属性值中。此外，您根本没有检查数字 - 这些类后面可能跟着任何东西，但它们仍然会被选中。 - jcsanyi

还是不对。选项#1太具体了（你不能交换类，将一个新类添加到开头...），而且它也匹配“positioned”等。选项#2匹配“positioned”，“unpositionable”等。选项#3如果“positionX”类是第一个，则会出现问题，而且它也匹配“positioned”。 - John Dvorak

但是，根据您的问题，这个解决方案之一可以解决它，@Navneet Saini。 - sangram parmar

Answer 8

如果您知道SomeINTEGER的值，请使用以下代码：

  $(".position" + SomeINTEGER).css('backgroundColor','red');

else // 这表明从“位置”开始

 $('span[class^=position]).css('backgroundColor','red');

- SadhanaP

---

你的第一个解决方案实际上并没有回答问题 - 他们不知道整数。第二个解决方案假设位置类是元素拥有的第一个类 - 这是不能保证的。 - jcsanyi