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

Question

I have three spans

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

I want to add active class for span that text equal with myVariable

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

but this method doens't work for this example.

some proposal?

Answer 1

Using jQuery, use the contains selector to select all elements that contain the specified text:

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

Notice: You have no guarantee with this solution that only "text2" spans elements would be selected because contains functioning pretty much like the SQL like clause, it will select whatever starts or ends with the given text. You may enforce exact-match comparison on it as @xec suggested :

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

Look at my jsFiddle example: http://jsfiddle.net/ynevet/337NV/

Answer 2

You can use :contains()

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

DEMO

Answer 3

Although contains work, I personally think, you can do this ( See bottom for why ):

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

Take a look at jsperf . This method is the fastest and most efficient.

contains is slow when compared to filter .

Answer 4

Like some other answers suggest, using :contains() can work, as long as it doesn't need to be an exact match. :contains(text2) will match <span>text2</span> as well as potentially false positives, such as <span>text23</span> .

If you need an exact match, you could use a custom filter instead;

$(".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

You can try below code:

Working Demo

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