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

var n =10;  
$(".someClass position"+n).css("background-color","#b0c4de"); 

Answer 2

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

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

有可能是通过治疗class只是另一种属性，做对的值部分匹配做这个哈克方式。

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

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

如果你知道SomeINTEGER的值，然后使用：

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

其他//这表明从开始“position”

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

Answer 7

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

试试这个：

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

Working Fiddle

你可以只修改正则表达式来获得完美的结果:)

Answer 9

试试这个

它的工作

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