Question

代码版本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">

我正在使用输入，因为它们是使用asp.net/c＃

以编程方式添加的按钮

我尝试过几个解决方案，而且我仍然让每个元素都添加了类。

我用输入更新了this jsfiddle，现在它根本没有受到影响。我猜:contains不会检查input value。

使用我的原始方法，我按如下方式修复它，或者看看Elias的答案：

        $(".Buttons").each(function() {
            if ($(this).attr("value") == one) {
                $(this).addClass("currentButton");
            };
        });

Answer 1

做你正在做的事的最简单的方法是单行，但是：

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

check fiddle

这确实意味着你的: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:contains(one)"))
{
    $(this).addClass( "currentButton" );
}

评估为：

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

换句话说：你将字符串常量传递给主jQuery函数（$()），它可能试图做出赌注，并可能将它们视为选择器。遗憾的是，它们是空的，所以返回了一个空的数组式jQuery对象，并且任何对象/数组都是JS中的truthy值，因此检查的表达式被evalueted到true，因此，节点类被更改。登记/> 你也可以这么写：

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

它会一次又一次地记录It doesn't。

修改

在回复您的评论时，如果您真正想要的是根据元素的值属性进行过滤：

$('.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将接受“ONe”以及“One”或“one”，但赢了如果value属性包含“bones”，则返回true，而indexOf是CaseSensitive，但不检查 one 是否是单词的一部分。
对于区分大小写的正则表达式，您可以使用/\bone\b/，而不使用i。

同一件事的更严格但更短的版本可能是：

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

但是你可以使用很多jQ选择器，最好keep a reference close to your chest

Answer 2

DEMO

使用is（）：

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

Answer 3

如果没有每个功能，你可以做到这一点。 jQuery选择器将为您进行过滤，然后更新与选择器匹配的每个元素。

var text = "text to test for";

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

Here is a jsFiddle来演示。

Answer 4

$("e:contains(one)")这里有一个被视为字符串文字。

尝试，"e:contains('"+one+"')"现在将对您的字符串进行评估。

Answer 5

    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");

jsFiddle demo

对于类的每个元素，检查内容以查看它是否包含字符串，然后仅更新该元素

5 个答案:

check fiddle