添加類“active”以跨越 JQuery 或 JavaScript

Question

我有三個跨度

$(".regions_list li span")
[
<span>​text0</span>​
, 
<span>text1​</span>​
, 
<span>​text2</span>​
]

我想為與myVariable相等的文本添加活動類

  myVariable = "text2";
  $(".regions_list li span").eq(myVariable).addClass("active");

但此方法不適用於此示例。

一些建議？

Answer 1

使用 jQuery，使用contains選擇器選擇包含指定文本的所有元素：

var myVariable = "text2";
$(".regions_list li span:contains(" + myVariable + ")").addClass("active");

注意：您無法保證此解決方案只會選擇“text2”跨度元素，因為它contains功能與 SQL like子句非常相似，它將選擇以給定文本開頭或結尾的任何內容。 您可以按照@xec 的建議對其進行精確匹配比較：

$(".regions_list li span").filter(function(){
    return $(this).text() === myVariable;
}).addClass("active");

看看我的 jsFiddle 示例： http : //jsfiddle.net/ynevet/337NV/

Answer 2

您可以使用:contains()

$(".regions_list li span:contains('"+myVariable+"')").addClass("active");

演示

Answer 3

雖然contains工作，但我個人認為，您可以這樣做（原因見底部）：

$(".regions_list li span").filter(function(){
   return $(this).text() == myVariable;
}).addClass("active");

看看jsperf 。 這種方法是最快、最有效的。

與filter相比， contains速度較慢。

Answer 4

就像其他一些答案所暗示的那樣，只要不需要完全匹配，就可以使用:contains() 。 :contains(text2)將匹配<span>text2</span>以及潛在的誤報，例如<span>text23</span> 。

如果您需要完全匹配，則可以改用自定義過濾器；

$(".regions_list li span").filter(function(){
    return $(this).text() === myVariable;
}).addClass("active");

http://jsfiddle.net/baJLx/4/

Answer 5

使用包含jquery 的選擇器

$("span:contains('"+myVariable+"')").addClass("active");

Answer 6

你可以試試下面的代碼：

工作演示

var myVariable = "text1";
$(".regions_list li span:contains("+myVariable+")").addClass("active");