addClass() 僅指向子元素（而不是嵌套元素）

Question

我有以下標記：

 <div class="menu"> <a href="#" class="dropdown-item">Link 1</a> <a href="#" class="dropdown-item">Link 2</a> <ul class="hamburgerMenu__menu--levelTwo"> <li><a href="#" class="dropdown-item">Link 1</a></li> <li><a href="#" class="dropdown-item">Link 2</a></li> </ul> </div>

我正在嘗試通過 JQuery 將 class remove添加到ul之外的a標簽中。 所以我試圖實現以下標記：

 <div class="menu"> <a href="#" class="dropdown-item remove">Link 1</a> <a href="#" class="dropdown-item remove">Link 2</a> <ul class="hamburgerMenu__menu--levelTwo"> <li><a href="#" class="dropdown-item">Link 1</a></li> <li><a href="#" class="dropdown-item">Link 2</a></li> </ul> </div>

為了實現上述目標，我嘗試了以下方法：

$('.menu').children("a").addClass("remove");

但是，上面添加了remove到所有錨標簽，即使是ul中的標簽。

如何僅將remove添加到ul之外的a標簽

Answer 1

使用 > 符號來定位直系孩子，你不需要 jquery ，純 js 就足夠了。

 document.querySelectorAll('.menu > a').forEach(link => link.classList.add("remove"))

 <div class="menu"> <a href="#" class="dropdown-item remove">Link 1</a> <a href="#" class="dropdown-item remove">Link 2</a> <ul class="hamburgerMenu__menu--levelTwo"> <li><a href="#" class="dropdown-item">Link 1</a></li> <li><a href="#" class="dropdown-item">Link 2</a></li> </ul> </div>