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 + SomeINTEGER 的元素的position？

我想选择课程poistion + TheRespectiveInteger

的所有元素

Answer 1

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

通过将class视为另一个属性并对该值进行部分匹配，可能有 hacky 方法。

但更好的解决方案是添加另一个可以选择的类。也许添加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));
}

James Padolsey 给出的wonderfull implementation。

参见工作示例：http://jsfiddle.net/Q7fTW/16/

Answer 5

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

你也可以试试这个：

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

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.

refrence

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

Answer 8

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

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

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

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

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

8 个答案: