使用正則表達式檢查元素的類

Question

如何使用jQuery我可以檢查元素的類？

例如，在此代碼中，我想獲得cl_gry50類。

<span class="rate rate_cl_gry cl_gry50"> 
    <img src="img.png"> 
</span> 

所以，有時候，課堂上，我需要檢查可能是：

• cl_gry10
• cl_gry20
• cl_gry30
• cl_gry40
• cl_gry50

我需要一個正則表達式嗎？ 謝謝。

Answer 1

英鎊射手的回答是良好的開端，這裏是一個改進版本：

$("span[class*='cl_gry']").filter(function() { 
    return this.className.match(/(^|\W)cl_gry/); 
}); 

這將使用選擇獲得更好的性能和匹配它使用正則表達式來過濾掉不想要的。

測試這個HTML：

<span class="something cl_gry50"></span> 
<span class="cl_gry50"></span> 
<span class="fake_cl_gry"></span> 

將匹配第2個跨度，但不是第三個。

如果你想字符串「cl_gry50」，您可以修改檢查這樣的：

var found = []; 
$("span[class*='cl_gry']").filter(function() { 
    var match = this.className.match(/((^|\W)cl_gry[^\W]+)/); 
    if (!match) return false; 
    found.push(match[0]); 
    return true; 
}); 
console.log(found); //Will contain ["cl_gry50", "cl_gry50"] 

可以使用indexOf過濾重複的了，但需要填充工具爲IE8。

Answer 2

另一種方法對皮膚這隻貓

樣本HTML

<span id='span1' class="rate rate_cl_gry cl_gry50"> 
</span> 

<span id='span2' class="cl_gry50"> 
</span> 

<span id='span3' class="rate rate_cl_gry"> 
</span> 

JS

$.extend($.expr[":"], { 
     cl_gryN: function(e) 
     { 
      var cl_gryN = false; 
      $.each($(e).attr('class').split(" "), function(k, v) { 

       if (/cl\_gry[\d]+/.test(v)) 
       { 
        cl_gryN = true; 
       } 
      }); 
      return cl_gryN; 
     } 
    }); 

console.log($('#span1').is(':cl_gryN')); //true 
console.log($('#span2').is(':cl_gryN')); //true 
console.log($('#span3').is(':cl_gryN')); //false