Question

我正在处理下拉菜单，并希望有选择地更改某些元素的href属性。菜单由两个类组成，即菜单项和子菜单项。每个menuitem都有一个相应的子菜单，但有些子菜单包含空列表。对于具有空子菜单列表的菜单项，我希望href为“＃”。

<div id="info" class="menuitem"><a href="http://www.asmithspace.net">Info</a><!--start menuitem-->
<div id="infosubmenu" class="submenu"><!--start submenu-->
<ul>
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
</ul>
</div><!--end submenu-->
</div><!--end menuitem-->
<div id="business" class="menuitem"><a href="http://www.asmithspace.net">Business</a><!--start menuitem-->
<div id="businesssubmenu" class="submenu"><!--start submenu-->
<ul>
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
</ul>
</div><!--end submenu-->
</div><!--end menuitem-->
<div id="jobs" class="menuitem"><a href="http://www.asmithspace.net">Jobs</a><!--start menuitem-->
<div id="jobssubmenu" class="submenu">
<ul>
</ul>
</div><!--end submenu-->
</div><!--end menuitem-->

我已尝试使用$ .each循环和常规javascript对此代码进行不同的修改，但我所做的一切都将所有menuitem href更改为“＃”，或者不会更改其中任何一个。

if (!$('.menuitem').children('.submenu').children('ul').children('li').length > 0) {
$('.menuitem').children('a').attr('href', '#'); }

如果有人能告诉我我做错了什么，我真的很感激！我的测试页面可以找到here。

Answer 1

$(".menuitem > a").each(function () {
  if ($(this).next('.submenu').find('li').length > 0)
    $(this).attr("href","#");
});

DEMO

Answer 2

我认为这就是你要找的东西：

$('.menuitem')
  .children('.submenu')
  .each(function(index) {
    if($(this).children('ul').children('li').length === 0) {
      $(this).closest('.menuitem').children('a').attr('href', '#');
    }
  });

对于每个子菜单，它检查ul > li数组的长度，如果为0，则更改最近的父菜单项中链接的href。

选择性地改变类的href

2 个答案: