在jquery中仅选择第一级元素

Question

如何<ul>从这样的列表中选择仅父项的链接元素？

<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a>
  <ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>

所以在CSS中ul li a,但不是ul li ul li a

谢谢

Answer 1

$("ul > li a")

但是如果您特别想要定位最外层的ul,则需要在根ul上设置一个类:

<ul class="rootlist">
...

那就是:

$("ul.rootlist > li a")....

确保您只拥有根li元素的另一种方法:

$("ul > li a").not("ul li ul a")

它看起来很笨拙,但应该可以解决问题

Answer 2

获得初始ul后,可以使用children()方法,该方法仅考虑元素的直接子元素.正如@activa指出的那样,轻松选择根元素的一种方法是给它一个类或一个id.以下假设您具有id的根ul root.

$('ul#root').children('li');

Answer 3

如其他答案中所述,最简单的方法是唯一地标识根元素(通过ID或类名称)并使用直接后代选择器.

$('ul.topMenu > li > a')

但是,我遇到了这个问题,寻找一种解决方案,该解决方案可以在不同深度的DOM 上使用未命名的元素.

这可以通过检查每个元素并确保它在匹配元素列表中没有父元素来实现.这是我的解决方案,包含在jQuery选择器'topmost'中.

jQuery.extend(jQuery.expr[':'], {
  topmost: function (e, index, match, array) {
    for (var i = 0; i < array.length; i++) {
      if (array[i] !== false && $(e).parents().index(array[i]) >= 0) {
        return false;
      }
    }
    return true;
  }
});

利用这个,原帖的解决方案是:

$('ul:topmost > li > a')

// Or, more simply:
$('li:topmost > a')

完整的jsFiddle 在这里可用.

Answer 4

简单地你可以使用这个..

$("ul li a").click(function() {
  $(this).parent().find(">ul")...Something;
}

参见示例：https : //codepen.io/gmkhussain/pen/XzjgRE