jQuery if else无序列表addClass

jQuery if else unordered list addClass

本文关键字：列表 addClass 无序 else if jQuery      更新时间：2023-09-26

我有一个带有四个li元素的ul。我想看看哪一个有.selected类。如果li具有类别.selected，则不执行任何操作。如果同一列表中的另一个.li没有.selected类，我想添加.li-border类。在下面的代码示例中，我可以启动console.log，但不能启动addClass。我错过了什么？谢谢

if ($("ul.portfolio-nav li a").hasClass("selected")) {
    console.log("yo");
} else {
    $(this).addClass("li-border");
};

试试这个代码：

$("ul.portfolio-nav li a").each(function(){
    if ( !$(this).hasClass("selected") ) {
        $(this).addClass("li-border");
    };
});
.li-border{
    border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='portfolio-nav'>
    <li><a href='#'>First element</a></li>
    <li><a href='#' class="selected">Second and selected element</a></li>
    <li><a href='#'>Third element</a></li>
</ul>

希望这能有所帮助。

:not选择器应该完成以下操作：

$("ul.portfolio-nav li a:not(.selected)").addClass('li-border');

或者使用".not"函数，如jQuery文档所建议的：

$("ul.portfolio-nav li a").not(".selected").addClass('li-border');

这里有一个例子。用你想要的样式替换这些样式应该很容易。

$(document).ready(function() {
  $("#list-items li").each(function() {
    if (!$(this).hasClass('selected')) {
      $(this).addClass('disable');
    }
  });
});
li:hover,
.selected {
  text-decoration: underline;
  cursor: pointer;
  color: black;
}
.disable {
  color: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul id="list-items">
  <li>List item</li>
  <li>List item</li>
  <li class="selected">Selected item</li>
  <li>List item</li>
</ul>

不要让自己过于复杂。只需删除所有li边界类，然后将其添加到您想要匹配的集合中。

https://jsfiddle.net/da98dmgt/7/

$("ul.portfolio-nav li").click(function(){
    $("ul.portfolio-nav  ul li").removeClass("li-border");
    $(this).siblings("li").addClass("li-border");
});
相关文章：