Question

我有ul个，有li个元素。我想查看哪一个有班级.selected。如果li hasClass .selected，则不执行任何操作。如果同一列表中的另一个.li没有.selected类，我想添加类.li-border。在下面的代码示例中，我可以触发console.log而不是addClass。我错过了什么？谢谢！

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

Answer 1

试试这段代码：

＆＃13;

$("ul.portfolio-nav li a").each(function(){
    if ( !$(this).hasClass("selected") ) {
        $(this).addClass("li-border");
    };
});

＆＃13;

.li-border{
    border: 1px solid black;
}

＆＃13;

<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>

＆＃13;

希望这有帮助。

Answer 2

:not选择器可以解决这个问题：

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

或者使用＆＃39; .not＆＃39;功能，as suggested by jQuery documentation：

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

Answer 3

不要让自己复杂化。只需删除所有li-border类，然后将其添加到您想要匹配的一组中。

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

Answer 4

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

$(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>

jQuery if else unordered list addClass

4 个答案: