如果child aria-expanded = true，則將類添加到父元素

Question

如果aria-expanded=true如何將類添加到父元素？

我有以下標記：

 $(function () { if ($('.navbar-collapse').attr('aria-expanded') === "true") { $(this).parents("header").addClass('red'); } }); 

 .red { background: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <header class="navbar navbar-s" id="master" role="banner"> <div class="container"> <nav id="main-navbar" class="navbar-collapse" role="navigation" aria-expanded="true"> Navigation </nav> </div> </header> 

我認為if查詢有效，但其他代碼無效。

Answer 1

你的問題是， this范圍內的if條件將參照window ，而不是你選擇.navbar-collapse元素。

為了解決這個問題，您可以使用“屬性選擇器”來檢索元素，然后鏈接所需的方法調用以將該類添加到父目標中，請嘗試以下操作：

 $(function() { $('.navbar-collapse[aria-expanded="true"]').closest('header').addClass('red'); }); 

 .red { background: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <header class="navbar navbar-s" id="master" role="banner"> <div class="container"> <nav id="main-navbar" class="navbar-collapse" role="navigation" aria-expanded="true"> Navigation </nav> </div> </header> 

Answer 2

if塊中的this並不指向nav元素，因此您沒有工作。

您可以使用“ Attribute Equals Selector [name=”value”]來定位元素，然后向上移動。

 $(function() { $('.navbar-collapse[aria-expanded="true"]').parents("header").addClass('red'); }); 

 .red { background: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <header class="navbar navbar-s" id="master" role="banner"> <div class="container"> <nav id="main-navbar" class="navbar-collapse" role="navigation" aria-expanded="true"> Navigation </nav> </div> </header>