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，我想在attr div中添加额外的uk-navbar-dropdown。例如：

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

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

Answer 1

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

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

然后，.prev()改为.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>

Answer 2

尝试使用.each（）传入的元素参数而不是$（this）

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


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

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

循环ID并添加额外的attr（）

2 个答案: