jQuery添加css(如果不存在)

Question

我在下面的示例中使用JQuery时遇到问题。

$(".side-nav ul li ul:not([class*='hide'])").addClass("hide");

.hide {
display: none;
}

<div class="side-nav">
<ul>
<li>
<a href="#">FIRST</a>
<ul class="hide">
<li>one</li>
<li>two</li>
<li>tree</li>
</ul>
</li>
<li>
<a href="#">SECOND</a>
<ul> <!-- here need add css class="hide" -->
<li>one</li>
<li>two</li>
<li>tree</li>
</ul>
</li>
</ul>
</div>

示例：https://codepen.io/moldow/pen/ExyzJOb

Answer 1

您可以迭代每个ul元素，并检查它是否包含类hide

$(".side-nav ul li ul").each(function() {
if(!$(this).hasClass("hide")) {
$(this).addClass("hide");
}
})

.hide {
display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="side-nav">
<ul>
<li>
<a href="#">FIRST</a>
<ul class="hide">
<li>one</li>
<li>two</li>
<li>tree</li>
</ul>
</li>
<li>
<a href="#">SECOND</a>
<ul> <!-- here need add css class="hide" -->
<li>one</li>
<li>two</li>
<li>tree</li>
</ul>
</li>
</ul>
</div>

另一种方法是使用$(".side-nav ul li ul").addClass("hide");它只会将类hide添加到没有它的元素中，因此在元素具有类的情况下不会有重复的类

$(".side-nav ul li ul").addClass("hide");

.hide {
display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="side-nav">
<ul>
<li>
<a href="#">FIRST</a>
<ul class="hide">
<li>one</li>
<li>two</li>
<li>tree</li>
</ul>
</li>
<li>
<a href="#">SECOND</a>
<ul> <!-- here need add css class="hide" -->
<li>one</li>
<li>two</li>
<li>tree</li>
</ul>
</li>
</ul>
</div>