javascript - 将特定属性添加到 div 中的 anchor 标记

Question

我在 wordpress 中创建菜单时遇到一些问题

导航代码

<nav class="navbar navbar-inverse" id="sidebar-wrapper" role="navigation">
  <ul id="mobile" class="sidenav">
    <li class="menu-item menu-item-type-custom menu-item-object-custom current- 
     menu-item current_page_item menu-item-home menu-item-7"> <a href="http://localhost/test/">Home</a> </li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13"> <a href="http://localhost/buildownwp/laman-contoh/">Laman Contoh</a> </li>
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1159"> <a href="#" class="dropdown-toggle" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">et nulam</a>
      <ul class="sub-menu">
        <li class="menu-item menu-item-type-post_type menu-item-object-post menu-item-15"> <a href="http://localhost/buildownwp/tak-berkategori/halo-dunia/" class="dropdown-toggle" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Halo dunia!</a> </li>
        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1161"> <a href="#" class="dropdown-toggle" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">second2</a>
          <ul class="sub-menu">
            <li class="menu-item menu-item-type-post_type menu-item-object-post menu-item-14"> <a href="http://localhost/buildownwp/tak-berkategori/lorem-ipsum/" class="dropdown-toggle" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Lorem Ipsum</a> </li>
            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1160"><a href="#" class="dropdown-toggle" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">second</a> </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1158"> <a href="#">dolor sit amet</a></li>
  </ul>
</nav>

jQuery

$('.menu-item-has-children a').attr('class', 'dropdown-toggle').attr('id','navbarDropdown').attr('data-toggle','dropdown').attr('aria-haspopup','true').attr('aria-expanded','false');

如果有 class，该代码应该像菜单一样显示 menu-item-has-children 将添加属性，或者如果该菜单有下拉菜单，则像多个下拉菜单一样显示，但是像这样的代码的结果

submenu hello,lorem ipsum and second，不应该影响那个代码，因为他没有子菜单/子菜单，非常感谢你能帮助我

Answer 1

好吧，我知道你想限制在父节点上查找 anchor 标记，对吗？ 你的代码

$('.menu-item-has-children a').attr('class', 'dropdown-toggle').attr('id','navbarDropdown').attr('data-toggle','dropdown').attr('aria-haspopup','true').attr('aria-expanded','false');

将 $('.menu-item-has-children a') 更改为 $('.menu-item-has-children > a')

像这样

$('.menu-item-has-children > a').attr('class', 'dropdown-toggle').attr('id','navbarDropdown').attr('data-toggle','dropdown').attr('aria-haspopup','true').attr('aria-expanded','false');