通过 jquery 添加类，但仅在不存在时答案

【问题标题】：add class via jquery but only when not exists通过 jquery 添加类，但仅在不存在时
【发布时间】：2012-01-06 04:33:04
【问题描述】：

我想将一个类 (class="bbox") 添加到 ul 列表，但前提是不存在类。这就是我到目前为止所拥有的。如果 ul-tag 中存在类，如何使用 jquery 检查？

$("ul").addClass("bbox");

【问题讨论】：

不需要检查是否已经添加了类； .addClass 将在内部执行 .hasClass 检查。见：stackoverflow.com/questions/13358887

标签： jquery list

【解决方案1】：

只需使用$('.selector').addClass("myClass");。

jQuery 添加/删除类函数都在内部检查重复项，这意味着调用addClass 两次只会添加一次类。

【讨论】：

来自 jQuery 文档：api.jquery.com/addclass 请务必注意，此方法不会替换类。它只是添加类，将其附加到任何可能已经分配给元素的类。
@vanduc1102 如果您的意思是 jQuery 会复制类，那么您误解了文档。该声明意味着它不会替换所有class 属性值。 jQuery 确实会检查重复性，并且它已经在 SO 中被许多 QA 所涵盖。

【解决方案2】：

如果你想检查一个特定的类是否存在，那么：

 if(!$("ul").hasClass("class-name")){
    $("ul").addClass("bbox");
 }

如果要检查是否存在任何类：

if ($('ul').attr('class') == '') {
    $("ul").addClass("bbox");
}

【讨论】：

我试图选择#content 中的第一个ul，但它选择了所有。怎么了？ if($('#content ul:nth-child(1)').hasClass("bbox") == false){ $("ul").addClass("bbox"); }
hasClass() 已经返回 true 或 false 因此检查是否等于 false 是多余的。 if(!$('ul').hasClass('classname')) 就足够了
关于特定类的事情，到目前为止，jQuery 已经在使用 addClass 添加它之前检查了该类

【解决方案3】：

karim79，你几乎明白了！

让我纠正你

$("ul:not([class*='bbox'])").addClass("bbox");

您将标签与绝对无类匹配，如果 ul 有其他类，则不会进行匹配。您必须搜索要添加的确切课程。像 .hasClass 方法一样。

希望对你有帮助

【讨论】：

如果我没记错的话，你忘记了属性选择器周围的括号。另外，$("ul:not([class~='bbox'])").addClass("bbox"); 会更好（波浪号）。

【解决方案4】：

我想知道这会很好用 -->

$("ul").removeClass("bbox").addClass("bbox");

如果有的话，它首先会删除，然后添加新的。对我来说效果最好，因为我懒得输入所有ifthingy。

【讨论】：

【解决方案5】：

如果我在 2 个类之间切换，我会使用此方法

if (foo)
    $('button.btn-foo').removeClass('foo bar').addClass('foo');
if (bar)
    $('button.btn-foo').removeClass('foo bar').addClass('bar');

所以我不必检查按钮的当前设置

【讨论】：

【解决方案6】：

只有在不存在的情况下才能使用此代码添加类

$('.your-dom:not(.class-name)').addClass('class-name');

【讨论】：

【解决方案7】：

简而言之：

// fine, because nothing happens if 
// there are no matching elements
$("ul[class='']").addClass("bbox");

【讨论】：

【解决方案8】：

仅当不存在类时才将类 (class="bbox") 添加到 ul-list：

if (!$('ul').attr('class') == '') {
    $("ul").addClass("bbox");
}

【讨论】：