添加“类”;主动的;使用JQuery或JavaScript跨越

添加“类”;主动的;使用JQuery或JavaScript跨越,javascript,jquery,html,Javascript,Jquery,Html,我有三个跨度 $(".regions_list li span") [ <span>​text0</span>​ , <span>text1​</span>​ , <span>​text2</span>​ ] 但是这个方法不适用于这个例子 一些建议?您可以尝试以下代码: var myVariable = "text1"; $(".regions_list li span:contains("+myVariable+"

我有三个跨度

$(".regions_list li span")
[
<span>​text0</span>​
, 
<span>text1​</span>​
, 
<span>​text2</span>​
]
但是这个方法不适用于这个例子


一些建议?

您可以尝试以下代码:

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

为此使用jquery选择器

$("span:contains('"+myVariable+"')").addClass("active");
使用jQuery,使用选择器选择包含指定文本的所有元素:

var myVariable = "text2";
$(".regions_list li span:contains(" + myVariable + ")").addClass("active");
注意:此解决方案不能保证只选择“text2”span元素,因为
包含
功能非常类似于SQL
like
子句,它将选择以给定文本开头或结尾的内容。您可以对其强制执行精确匹配比较,如下所示:


看看我的JSFIDLE示例:

尽管
包含了
工作,但我个人认为,您可以做到这一点(请参见底部了解原因):

看一看。这种方法是最快和最有效的


contains
filter
相比速度较慢,就像其他一些答案所建议的那样,使用
:contains()
可以工作,只要不需要精确匹配即可<代码>:包含(text2)将匹配
text2
以及潜在的误报,如
text23

如果需要精确匹配,可以使用自定义过滤器

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

只要你没有任何误报('包含'vs'is'),这个解决方案就可以了。呵呵,这与我的答案完全相同,只是你争论的是性能角度而不是精度:)+1对你来说亲爱的sir@xec好吧,别叫我先生。我只有14岁;)您的jsperf有点缺陷,您遗漏了使用
:contains
的另一个选项,这使得它们在速度方面相对相当。如果我想确保精确匹配,我还是更喜欢你的方法。在筛选器中使用
:contains
比在原始选择器中使用它要快的原因是当你在原始选择器中使用它时,由于自定义的
:contains
选择器,jquery无法再使用
document.querySelectorAll
进行选择。通过将其分为两个操作,jquery可以使用效率更高的
document.querySelectorAll()
然后对结果进行筛选。Amit,如果我是你,我会回滚答案。在jsperf链接中,似乎原始的
.filter()
仍然是最快的,并且使用
:contains()
可能会导致误报(请参见我的答案)。您是否尝试了您对“text23”的假设?
var myVariable = "text2";
$(".regions_list li span:contains(" + myVariable + ")").addClass("active");
$(".regions_list li span").filter(function(){
    return $(this).text() === myVariable;
}).addClass("active");
$(".regions_list li span").filter(function(){
   return $(this).text() == myVariable;
}).addClass("active");
$(".regions_list li span").filter(function(){
    return $(this).text() === myVariable;
}).addClass("active");