使用JQuery或JavaScript添加类“active”以跨越

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 {{非常相似1}}子句，它将选择任何以给定文本开头或结尾的内容。您可以对其进行精确匹配比较@xec suggested：

like

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

Answer 2

您可以使用:contains()

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

DEMO

Answer 3

虽然contains工作，但我个人认为，你可以这样做（见底部为什么）：

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

看看jsperf。这种方法是最快，最有效的。

与contains相比，

filter速度很慢。

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的contains选择器

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

Answer 6

您可以尝试以下代码：

<强> Working Demo

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