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

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

score 6 · Accepted Answer

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

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

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

score 4 · Accepted Answer

尝试这个：

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

工作小提琴

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

score 2 · Accepted Answer

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

score 1 · Accepted Answer

尝试以下选择器：

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

score 0 · Accepted Answer

尝试这个

它正在工作

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

score 0 · Accepted Answer

$(".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');

score 0 · Accepted Answer

你也可以试试这个：

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

score -2 · Accepted Answer

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

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

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

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

jquery - jQuery：如何在这里选择具有特定类的元素？

8 回答 8

Related

Reference