3

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,我将如何更改backgroundColor只有那些具有类position+ SomeINTEGER的元素?

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

4

8 回答 8

6

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

通过将其视为另一个属性并对值进行部分匹配,可能有一种hacky方法来做到这一点。class

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

于 2013-06-21T06:42:23.830 回答
4

尝试这个:

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

工作小提琴

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

于 2013-06-21T07:06:43.333 回答
2
$(".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的任何元素,如果必须这样做。NsomeClass

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

于 2013-06-21T06:51:48.840 回答
1

尝试以下选择器:

$("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/

于 2013-06-21T06:45:56.537 回答
0

尝试这个

它正在工作

    $('[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/

于 2013-06-21T07:16:27.323 回答
0
$(".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');
于 2013-06-21T06:41:48.383 回答
0

你也可以试试这个:

<script type="text/javascript">
    $(function(){
        if( $(".someClass").hasClass(".position"+NUMBER) ){
            $(this).css({ 'backgroundColor','your color' });
        } 
    });
</script>
于 2013-06-21T06:46:55.347 回答
-2

如果您知道 SomeINTEGER 的值,请使用:

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

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

 $('span[class^=position]).css('backgroundColor','red');
于 2013-06-21T06:49:07.533 回答