如何定位 JavaScript 中具有特定 class 的所有元素

Question

我目前正在使用 WordPress 和 Bootstrap 5.

由于 WordPress 对 wp_nav_men 功能的限制。我根本看不到标记。这意味着我不能在这里和那里手动添加 classes。我需要这样做才能使 Bootstrap 子菜单导航正常工作。这意味着我需要使用 JavaScript 将特定的东西注入某些元素到

为了实现这一点，我似乎需要获得具有相同 class 名称的额外 child 节点来继承相同的 JavaScript 设置。这就是我想要做的。下面我列出了我在标记中看到的内容、我希望看到的步骤以及 JavaScript 当前的样子。

标记：

<ul id="mainNav" class="menu">
    <li id="menu-item-84" class="menu-item-has-children  highlight"><a href="" id="dropdownMenuLink" role="button" data-bs-toggle="dropdown" class="nav-link dropdown-toggle show" aria-expanded="true"></a>
        
        <ul class="sub-menu dropdown-menu show" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(906px, 61px, 0px);" data-popper-placement="bottom-start">
            <li id="menu-item-269" class="menu-item-has-children"><a href=""></a>
                <ul class="sub-menu">
                    <li id="menu-item-271" class=""><a href=""></a></li>
                    <li id="menu-item-272" class=""><a href=""></a></li>
                    <li id="menu-item-270" class=""><a href=""></a></li>
                </ul>
            </li>
        </ul>
        
    </li>
    <li id="menu-item-101" class=""><a href="">Product</a></li>
    <li id="menu-item-103" class="menu-item-has-children"><a href="">About Us</a>
        <ul class="sub-menu">
            <li id="menu-item-228" class=""><a href="">About Us</a></li>
            <li id="menu-item-105" class=""><a href="">News and Events</a></li>
            <li id="menu-item-106" class=""><a href="">Join Our Team</a></li>
        </ul>
    </li>
    <li id="menu-item-99" class=""><a href="">Contact</a></li>
</ul>

第 1 步：
如果 li 的 class 为 .menu-item-has-children，请将以下 id、role、data-bs-toggle 和 class 添加到元素中.

第 2 步：
任何带有 class 或 .menu-item-has-children 且带有 ul 的 li 都将有一个子导航菜单。因此，子导航菜单必须继承以下 class of dropdown-menu.

    // Toggle child menu item in main nav

    // assign expanse li to variable
    let liExpanse = document.querySelector('.menu-item-has-children');

    // check if nested ul is contained in parent li of main nav
    let liExpanseChild = document.querySelector('.sub-menu');

    // add id, role, data attributes to div
    function addAtt() {
        liExpanse.firstChild.setAttribute('id','dropdownMenuLink');
        liExpanse.firstChild.setAttribute('role','button');
        liExpanse.firstChild.setAttribute('data-bs-toggle','dropdown');
    }
    addAtt();

    // add classnames to divs
    function addClassName() {
        liExpanse.firstChild.classList.add('nav-link', 'dropdown-toggle');
        liExpanseChild.classList.add('dropdown-menu');
    }
    addClassName();

想法：
我注意到当使用 firstChild 方法时，它只查找第一个 child。还有一个 lastChild 选项，但我正在寻找的是找到 class 为 .menu-item-has-children 的所有节点，然后执行以下操作。

经过一些研究并根据评论，我实际上不希望 querySelectorAll 选择与 class 或 ID 相关的 all。就一层。

Answer 1

Top-level 元素将以 .menu 作为其父元素。您也可以使用 #mainNav 代替它。在 css 中，> 表示左边的事物是右边事物的直接父级。

Top-level 锚点选择器

document.querySelectorAll(".menu > .menu-item-has-children > a")

Top-level 子菜单选择器

document.querySelectorAll(".menu > .menu-item-has-children > .sub-menu")

使用父代的 id 而不是 class，如果更方便的话

document.querySelectorAll("#mainNav > .menu-item-has-children > .sub-menu")

如何定位 JavaScript 中具有特定 class 的所有元素

How to target all elements with a specific class in JavaScript

javascript

html

css

wordpress

twitter-bootstrap