仅在jquery中选择第一级元素

How can I select the link elements of only the parent <ul> from a list like this?

如何从这样的列表中只选择父

<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>

So in css ul li a, but not ul li ul li a

所以在css中，不是

Thanks

谢谢

10 个解决方案

#1

$("ul > li a")

But you would need to set a class on the root ul if you specifically want to target the outermost ul:

但是，如果您特别想要针对最外层的ul，则需要在root ul上设置一个类:

<ul class="rootlist">
...

Then it's:

然后是:

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

Another way of making sure you only have the root li elements:

另一种方法确保你只有根李元素:

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

It looks kludgy, but it should do the trick

它看起来很笨拙，但它应该能达到目的

#2

Once you have the initial ul, you can use the children() method, which will only consider the immediate children of the element. As @activa points out, one way to easily select the root element is to give it a class or an id. The following assumes you have a root ul with id root.

一旦有了初始的ul，就可以使用children()方法，该方法只考虑元素的直接子元素。正如@activa所指出的，简单地选择根元素的一种方法是给它一个类或一个id。

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

#3

As stated in other answers, the simplest method is to uniquely identify the root element (by ID or class name) and use the direct descendent selector.

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

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

However, I came across this question in search of a solution which would work on unnamed elements at varying depths of the DOM.

然而，我遇到这个问题是为了寻找一种解决方案，它可以在DOM不同深度的未命名元素上工作。

This can be achieved by checking each element, and ensuring it does not have a parent in the list of matched elements. Here is my solution, wrapped in a jQuery selector 'topmost'.

这可以通过检查每个元素来实现，并确保在匹配的元素列表中没有父元素。这是我的解决方案，包含在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;
  }
});

Utilizing this, the solution to the original post is:

利用这一点，原来的帖子的解决方案是:

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

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

Complete jsFiddle available here.

完成jsFiddle可用。

#4

You might want to try this if results still flows down to children, in many cases JQuery will still apply to children.

如果结果仍然传递给子代，您可能希望尝试这种方法，在许多情况下，JQuery仍然适用于子代。

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

Using this method: E > F Matches any F element that is a child of an element E.

使用这个方法:E >f匹配任何一个元素E的子元素。

Tells JQuery to look only for explicit children. http://www.w3.org/TR/CSS2/selector.html

告诉JQuery只关注显式的孩子。http://www.w3.org/TR/CSS2/selector.html

#5

Simply you can use this..

你可以用这个。

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

See example : https://codepen.io/gmkhussain/pen/XzjgRE

看到示例:https://codepen.io/gmkhussain/pen/XzjgRE

#6

You can also use $("ul li:first-child") to only get the direct children of the UL.

您还可以使用$(“ul li:first-child”)只获取ul的直接子节点。

I agree though, you need an ID or something else to identify the main UL otherwise it will just select them all. If you had a div with an ID around the UL the easiest thing to do would be$("#someDiv > ul > li")

但我同意，您需要一个ID或其他东西来标识主UL，否则它将只选择它们全部。如果在UL周围有一个ID为div最简单的方法是$(“#someDiv > UL > li”)

#7

Try this:

试试这个:

$("#myId > UL > LI")

#8

I had some trouble with nested classes from any depth so I figured this out. It will select only the first level it encounters of a containing Jquery Object:

我在嵌套类上遇到了一些麻烦，所以我想出来了。它只会选择包含Jquery对象的第一个级别:

var $elementsAll = $("#container").find(".fooClass");4

var $levelOneElements = $elementsAll.not($elementsAll.children().find($elementsAll));

$levelOneElements.css({"color":"red"})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="fooClass" style="color:black">
Container
  <div id="container">
    <div class="fooClass" style="color:black">
      Level One
      <div>
        <div class="fooClass" style="color:black">
             Level Two
        </div>
      </div>
    </div>
    <div class="fooClass" style="color:black">
      Level One
      <div>
        <div class="fooClass" style="color:black">
             Level Two
        </div>
      </div>
    </div>
  </div>
</div>

#9

 $("ul.rootlist > target-element")
2   $("ul.rootlist").find(target-element).eq(0) (only one instance)
3   $("ul.rootlist").children(target-element)

there are probably many other ways

可能还有很多其他的方法

#10

-1

.add_to_cart >>> .form-item:eq(1)

the second .form-item at tree level child from the .add_to_cart

从.add_to_cart中生成树级子的第二个。表单项。

#1

$("ul > li a")