jQuery Conditional 基于元素的内部 HTML 内容答案

【问题标题】：jQuery Conditional based on inner HTML content of an elementjQuery Conditional 基于元素的内部 HTML 内容
【发布时间】：2012-04-30 00:35:28
【问题描述】：

如果元素的内部 HTML 为 0，我想使用 javascript/jQuery 更改元素的类

我尝试了下面的代码，但它似乎不起作用。

var myElement = jQuery('.thisclass');
for(var i=0; i<myElement.length; i++){
    if(myElement[i].innerHTML == ' 0 '){
         jQuery('.thisclass').toggleClass('.newclass');
    }
}

有人可以指导我吗？我在这里做错了什么？有没有更简单的方法（全部使用 jQuery）

jsfiddle - http://jsfiddle.net/rm5Sp/

【问题讨论】：

您能发布一个涵盖这两种情况的（条纹）html 示例吗？
你能在 jsfiddle.net 上放一些示例代码吗？它应该可以帮助我们查看示例并向您提供代码反馈。
试试这个：jsfiddle.net/2LPq5

标签： javascript jquery conditional

【解决方案1】：

也许删除零周围的空格会有所帮助？

myElement[i].innerHTML == '0'

另外，试试这个代码，看看警告框是否是你所期望的：

var myElement = jQuery('.thisclass');
for(var i=0; i<myElement.length; i++){
    alert( myElement[i].innerHTML );
    if(myElement[i].innerHTML == ' 0 '){
         alert( "Toggling" );
         jQuery('.thisclass').toggleClass('.newclass');
         alert( "Toggled" );
    }
}

第一个框会告诉你什么是 innerHTML。第二个会告诉你条件是有效的。第三个会告诉你 jQuery 是否有效。

【讨论】：

调试方法的好例子。

【解决方案2】：

试试这个：

$(".thisClass").each(function(){
    if ($(this).html() == " 0 ") {
        $(this).toggleClass("newClass");
    }
});

【讨论】：

【解决方案3】：

这一行有问题：

jQuery('.thisclass').toggleClass('.newclass');

你需要在这里使用当前元素。此外，当您执行 addClass/removeClass/toggleClass 时，您不需要在类名中使用点（“.”）。会是这样的。

myElement[i].toggleClass('newclass');

【讨论】：

我试过了。但它也没有工作。这是 jsfiddle 链接 - jsfiddle.net/rm5Sp
@t_virus：那个小提琴至少有两个错误会阻止它工作。

【解决方案4】：

这应该可以解决问题：

$(".thisclass").each(function() {
    if($(this).html() == "0") {
        $(this).removeClass("thisclass");
        $(this).addClass("thatclass");
    }
});

【讨论】：

效果很好。 =) 而且绝对不是我对所有答案都打分。
是的，我能感觉到他的存在:)

【解决方案5】：

问题很可能是你的toggleClass 参数中有一个额外的点；它应该只是toggleClass("newclass")。

另一个可能的错误（尽管它不会阻止您的代码执行某事）是您正在切换所有.thisclass元素上的类，即使其中一个内容为0；我不确定这是不是故意的，所以提出来。

最后，您可以用更短的形式编写相同的代码，如下所示：

// If you want to toggle class on an element-by-element basis
jQuery('.thisclass').filter(function() { return this.innerHTML == " 0 "; })
                    .toggleClass('.newclass');

// Or if you want to toggle on *all* elements if one matches:
var count = jQuery('.thisclass')
                .filter(function() { return this.innerHTML == " 0 "; })
                .length;
if(count) {
    jQuery('.thisclass').toggleClass('.newclass');
}

【讨论】：

【解决方案6】：

我认为您必须修剪内部 html 内容以删除空的和不需要的尾随空格。

试试这个：

$(".thisclass").each(function() {
    var thisHtml = $(this).html();
    if (thisHtml.trim() == "0") {
        $(".thisclass").toggleClass("newclass");
    }        
});

Link to jsFiddle with example

【讨论】：