Javascript 对于类的每个元素，检查其内容是否包含字符串，如果包含字符串，则仅更新该元素

代码版本1：

        var one = "one";
        $.each($(".Buttons"),(function() {
            if ($("this:contains(one)")) {
                $(this).addClass( "currentButton" ); 
            };
        }));

代码版本2：

        var one = "one";
        $(".Buttons").each(function(a, e) {
            if ($("e:contains(one)"))
            { $(e).addClass( "currentButton" ); };
        });

我想你明白我想做什么了。我的问题是只更新文本匹配的特定元素，但是当只有一个匹配时，所有元素都会更新

编辑：HTML如下：

<input type="submit" class="Buttons" value="one">
<input type="submit" class="Buttons" value="two">
<input type="submit" class="Buttons" value="one & two">

使用is（）：

使用is（）：

---

您可以很简单地完成这项工作，而无需使用each函数。jQuery选择器将为您进行筛选，然后您将更新与选择器匹配的每个元素

var text = "text to test for";

$(".Buttons:contains(" + text + ")").addclass("currentButton");

---

为了演示。

您可以非常简单地完成这项工作，而无需使用each函数。jQuery选择器将为您进行筛选，然后您将更新与选择器匹配的每个元素

var text = "text to test for";

$(".Buttons:contains(" + text + ")").addclass("currentButton");

为了演示。

$（“e:contains（one）”）

这里一个被视为字符串文本

试试像这样，

“e:contains（“+one+”）”

现在一个将被计算为您的字符串。

$（“e:contains（one）”）

这里一个被视为字符串文本

    var one = "one";
    $(".Buttons").filter(function () {
        return $(":contains('"+one+"')",this);
    }).addClass("currentButton");

试试像这样，

“e:contains（“+one+”）”

现在一个将被计算为您的字符串

    var one = "one";
    $(".Buttons").filter(function () {
        return $(":contains('"+one+"')",this);
    }).addClass("currentButton");

或

    var one = "one";
    $(".Buttons").filter(function () {
        return this.innerHTML == 'one'; // note: innerHTML may be deprecated soon, avoid it
    }).addClass("currentButton");

或

    var one = "one";
    $(".Buttons").filter(function () {
        return this.innerHTML == 'one'; // note: innerHTML may be deprecated soon, avoid it
    }).addClass("currentButton");

---

做你正在做的事情最简单的方法是一行，不过：

var one = "one";
$(".Buttons").filter(":contains('"+one+"')").addClass("currentButton");
//or
$(".Buttons").filter(":contains('one')").addClass("currentButton");

这确实意味着您的

：contains

选择器是一个常量值，如果需要根据其他内容进行更改，请将其包装在函数中：

function changeClass(contains)
{
    contains = contains || 'one';//default value
    $('.Buttons').filter(":contains('"+contains+"')").addClass('currentButton');
}

当然，与往常一样，您可以将所有内容更改为参数，以便此函数更易于重用：

function changeClass(selector, filter, newClass)
{
    $(selector).filter(filter).addClass(newClass);
}
changeClass('.Buttons', ':contains("one")', 'currentButton');

您的问题是由于将

this

或

e

包含在字符串分隔符中而引起的，这有效地将它们转换为字符串常量，而不是对您试图更改的DOM节点的引用
发生的情况是：

if ($("e:contains(one)"))
{
    $(e).addClass( "currentButton" );
}

及

评估为：

if ([])
{
    $(this).addClass('currentButton');
}

换句话说：您将字符串常量传递给主jQuery函数（

$（）

），该函数可能试图对事物下注，并可能将它们视为选择器。遗憾的是，它们是空的，因此返回了一个像jQuery object这样的空数组，并且任何对象/数组在JS中都是真实值，因此选中的表达式的值为

true

，因此，节点类被更改。
你也可以这样写：

if ($('foobar, see if it matters what I write here'))
{
    console.log('It doesn\'t');
}

它会一次又一次地记录

它不会

编辑

对于您的评论，如果您真正想要的是根据元素的value属性进行过滤：

$('.Buttons').filter(function()
{//this function will be applied to each element returned by the $('.Buttons') selector
 //only those for which this callback returns true will get the currentButton class
    return /\bone\b/i.test($(this).val());
    //or, equally valid:
    return ($(this).val().indexOf('one') !== -1);
}).addClass('currentButton');

请注意，
/\bone\b/i
将接受“一”以及“一”或“一”，但如果value属性包含“bones”，则不会返回true，而
indexOf
区分大小写，但不会检查一个是否是单词的一部分。

对于区分大小写的正则表达式，可以使用
/\bone\b/
，而不使用
i

同一事物的一个更严格但短得多的版本可能是：

$('.Buttons[value~="'+one+'"]').addClass("currentButton");

但是你可以使用很多jQ选择器，最好的方法是使用一行程序：

var one = "one";
$(".Buttons").filter(":contains('"+one+"')").addClass("currentButton");
//or
$(".Buttons").filter(":contains('one')").addClass("currentButton");

这确实意味着您的
：contains
选择器是一个常量值，如果需要根据其他内容进行更改，请将其包装在函数中：

function changeClass(contains)
{
    contains = contains || 'one';//default value
    $('.Buttons').filter(":contains('"+contains+"')").addClass('currentButton');
}

当然，与往常一样，您可以将所有内容更改为参数，以便此函数更易于重用：

function changeClass(selector, filter, newClass)
{
    $(selector).filter(filter).addClass(newClass);
}
changeClass('.Buttons', ':contains("one")', 'currentButton');

您的问题是由于将
this
或
e
包含在字符串分隔符中而引起的，这有效地将它们转换为字符串常量，而不是对您试图更改的DOM节点的引用

发生的情况是：

if ($("e:contains(one)"))
{
    $(e).addClass( "currentButton" );
}

及

评估为：

if ([])
{
    $(this).addClass('currentButton');
}

换句话说：您将字符串常量传递给主jQuery函数（
$（）
），该函数可能试图对事物下注，并可能将它们视为选择器。遗憾的是，它们是空的，因此返回了一个像jQuery object这样的空数组，并且任何对象/数组在JS中都是真实值，因此选中的表达式的值为
true
，因此，节点类被更改。

你也可以这样写：

if ($('foobar, see if it matters what I write here'))
{
    console.log('It doesn\'t');
}

它会一次又一次地记录
它不会

编辑

对于您的评论，如果您真正想要的是根据元素的value属性进行过滤：

$('.Buttons').filter(function()
{//this function will be applied to each element returned by the $('.Buttons') selector
 //only those for which this callback returns true will get the currentButton class
    return /\bone\b/i.test($(this).val());
    //or, equally valid:
    return ($(this).val().indexOf('one') !== -1);
}).addClass('currentButton');

请注意，
/\bone\b/i
将接受“一”以及“一”或“一”，但如果value属性包含“bones”，则不会返回true，而
indexOf
区分大小写，但不会检查一个是否是单词的一部分。

对于区分大小写的正则表达式，可以使用
/\bone\b/
，而不使用
i

同一事物的一个更严格但短得多的版本可能是：

$('.Buttons[value~="'+one+'"]').addClass("currentButton");

但是有太多的jQ选择器可以使用，best
@DevlshOne
e:contains（“+one+”）
两个
“e:contains（one）”
和
“this:contains（one）”
都没有正确评估
var one
变量。由于这两个值都在引号中，所以它将它们作为字符串文本进行计算。请检查我的答案：
if（$（“e:contains（one）”）
或
if（$（$（“this:contains（one）”））
将始终为真，因为
$（'string-constant'）
将始终返回jQueryobject@DevlshOne
e:包含（“+one+”）
两者
“e:contains（one）”
和
“this:contains（one）”
没有正确地计算
var one
变量。由于这两个值都在引号中，它将它们作为字符串文本进行计算。请检查我的答案：
if（$（$e:contains（one）”）
或
if（$（$this:contains（one）”）
将始终为真，因为
$（'string-constant'）
将始终返回我同意的jQuery对象。使用
.Buttons
选择器已经提供了按钮的整个节点列表（数组），无需使用
.each（）
进行迭代，只需使用
.filter（）
。请检查我的更新