Question

我想创建一个规则来定位以下a元素：

<ul id="root">
   <li>
      <a href="item.html">Root Menu Item</a>
   </li>
</ul>

但是，如果li元素包含另一个ul元素，则不应该这样做，例如：

<ul id="root">
   <li>
      <a href="#">Sub Menu</a>
      <ul>
         <li>
            <a href="item.html">Sub Menu Item</a>
        </li>
      </ul>
   </li>
</ul>

我已根据需要创建了该事件，但需要它只能处理“根”菜单项。

我知道我只能添加一个id属性来定位所需的元素，但我的客户端安装的菜单插件不容易配置。

Answer 1

如果您匹配a请执行此操作：

var result  = $('#root > li:not(:has(ul)) > a');

如果您想允许更深层次的嵌套<ul>元素，并且只是想检查以确保只有直接孩子没有<ul>，您可以这样做：

var result  = $('#root > li:not(:has(> ul)) > a');

修改

要同时拥有多个选择器，请在引号内用逗号分隔它们：

var result = $('#root > li:not(:has(> ul)) > a, #someOtherElement');

Answer 2

$('#root a').click(function(e) {
    if ( $(this).parents('ul').length > 1 ) {
       e.preventDefault(); // cancel action for anchors inside of #root who have multiple parent list elements 
    }
});

根据要求更改逻辑。

jQuery - “不包含元素”的规则

2 个答案: