添加类“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");