javascript - 循环 ID 并添加额外的 attr()

Question

我试图根据类名添加一个额外的属性，但它并没有完全按照我想要的方式工作。我的菜单结构(简化)如下:

<ul class="main-menu">

<li>
    <a>Menu 1</a>
    <div class="uk-navbar-dropdown">
        <div id="km-megamenu-960" class="uk-navbar-dropdown-grid km-mode-click km-megamenu">dropdown content</div>
    </div>
</li>

<li><a>Menu 2</a></li>

<li>
    <a>Menu 3</a>
    <div class="uk-navbar-dropdown">
        <div id="km-megamenu-962" class="uk-navbar-dropdown-grid km-mode-hover km-megamenu">dropdown content</div>
    </div>
</li>

...

</ul>

我的jquery代码如下:

var ids = $('.km-megamenu').map(function() {
  return this.id;
}).get().join(',#');


$('#' + ids).each( function(i) {
    if ( $(this).hasClass('km-mode-click') ) {
        $(this).prev(".uk-navbar-dropdown").attr('mode', 'click');
    }

    if ( $(this).hasClass('km-mode-hover') ) {
        $(this).prev(".uk-navbar-dropdown").attr('mode', 'hover');
    }
});

根据类名 km-mode-hover 或 km-mode-click，我想在uk-navbar-dropdown div。例如:

<div class="uk-navbar-dropdown" mode="click">

使用console时，所有ID都是正确的。我只需要正确地循环它们即可。对于 jquery 我还是个新手，因此，如果有人能让我走上正轨，我将非常感激。

Answer 1

我改变了您使用选择器的方式。

我没有使用映射和获取每个 id，而是使用了您想要迭代的元素所共有的类。

然后，将 .prev() 更改为 .parent()，因为第一个应该用于查找 sibling ，而不是> parent 。

$('.km-megamenu').each(function() {
   $parent = $(this).parent('.uk-navbar-dropdown');
   
   if ($(this).hasClass('km-mode-click')) { 
     $parent.attr('mode', 'click');
     console.log('New attribute: ' + $parent.attr('mode'));
   } else if ($(this).hasClass('km-mode-hover')) {
     $parent.attr('mode', 'hover');
     console.log('New attribute: ' + $parent.attr('mode'));
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main-menu">
  <li>
    <a>Menu 1</a>
    <div class="uk-navbar-dropdown">
      <div id="km-megamenu-960" class="uk-navbar-dropdown-grid km-mode-click km-megamenu">dropdown content</div>
    </div>
  </li>

  <li><a>Menu 2</a></li>

  <li>
    <a>Menu 3</a>
    <div class="uk-navbar-dropdown">
      <div id="km-megamenu-962" class="uk-navbar-dropdown-grid km-mode-hover km-megamenu">dropdown content</div>
    </div>
  </li>
</ul>