JQuery 中的菜单链接选择器答案

【问题标题】：menu link selector in JQueryJQuery 中的菜单链接选择器
【发布时间】：2011-08-03 05:54:47
【问题描述】：

我有这个 html 菜单：

<div id="menu">
    <ul>
          <li>
                <a href="1.html"> 1 </a>
          </li>
          <li>
                <a href="2.html"> 2 </a>
          </li>
          <li class="submenu">
                <a href="#"> 3 list </a>
                <ol>
                     <li>
                           <a href="31.html"> 31 </a>
                     </li>
                     <li>
                           <a href="32.html"> 32 </a>
                     </li>
                     <li>
                           <a href="33.html"> 33 </a>
                     </li>
                </ol>
          </li>
          <li class="submenu">
                <a href="#"> 4 list </a>
                <ol>
                     <li>
                           <a href="41.html"> 41 </a>
                     </li>
                     <li>
                           <a href="42.html"> 42 </a>
                     </li>
                </ol>
          </li>
          <li>
                <a href="5.html"> 5 </a>
          </li>
    </ul>
 </div>

我正在使用 JQuery，我想获取不属于子菜单（1,2 和 5）的链接元素 (a)，所以我尝试了：

$('#menu ul li a').each(function(){
   //do something with the link element
});

但我意识到这个选择器采用了所有链接元素（1、2、31、32、33、41、42 和 5）。

我查阅了 JQuery 手册，但我找不到任何方法来一步获得我想要的链接元素，所以我终于做到了：

$('#menu ul li a').each(function(){
   if($(this).parent().parent().is('ul')){
      //do something with the link element
   }
});

这仅包含所有链接元素，并在条件过滤器中包含具有 ul 祖父（1,2 和 5）的元素。

我想知道是否有更好更干净的方法来获取非子菜单链接元素。

谢谢！

【问题讨论】：

标签： jquery jquery-selectors selector

【解决方案1】：

试试这个

$('#menu ul li a').not("li.submenu").each(function(){ });

实际上，这可能仍然会返回内部 li(s)。

所以也许另一个不是？

$('#menu ul li a').not(".submenu").not(".submenu *").each(function(){ });

【讨论】：

【解决方案2】：

希望我没有误会你的问题..

您想获得一级 li 没有子列表的元素吗？那么它的意思是li元素1、2和5？如果是这样，试试这个：

$('#menu ul > li:not(:has(li))').each(...);

它仅使用> 符号检查#menu 之后的第一级元素。然后再次过滤每个内部没有li 的li。

希望这会有所帮助..

【讨论】：

谢谢你！它可以添加链接元素，如下所示：$('#menu ul > li:not(:has(li)) a').each(...); ^_^