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+SomeINTEGER 的那些元素的 backgroundColor？

我想选择类poistion+TheRespectiveInteger的所有元素

Answer 1

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

可能有一种 hacky 方法可以做到这一点，将class 视为另一个属性并针对该值进行部分匹配。

但是，更好的解决方案是添加另一个您可以选择的类。也许有什么正在添加positionX 类的同时也添加了一个positioned 类。

Answer 2

试试这个：

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

Working Fiddle

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

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/

Answer 4

试试下面的选择器：

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

更多参考，见Write a jquery selector to select a class with a certain pattern

对于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));
}

wonderfull implementation 由 James Padolsey 提供。

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

Answer 5

你也可以试试这个：

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

Answer 6

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

编辑：

你问这个问题的方式很混乱。

要识别具有类位置+整数的元素，您需要为它们指定另一个类以进行识别

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

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

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/

Answer 8

如果您知道 SomeINTEGER 的值，请使用：

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

else // 这建议从“位置”开始

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