jQuery，如果否則無序列表addClass

Question

我有四個li元素的ul 。 我想檢查一下哪個人選擇了.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

試試這個代碼：

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

希望這可以幫助。

Answer 2

:not選擇器應該可以解決問題：

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

或使用jQuery文檔建議的'.not'函數：

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