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/