我试图根据类名添加一个额外的属性,但它并没有完全按照我想要的方式工作。 我的菜单结构(简化)如下:
<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 我还是个新手,
因此,如果有人能让我走上正轨,我将非常感激。
最佳答案
我改变了您使用选择器的方式。
我没有使用映射和获取每个 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>
关于javascript - 循环 ID 并添加额外的 attr(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44443290/