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。以下假设您具有标识为root的根ul。

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

Answer 3

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

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

但是，我遇到了这个问题，寻找一种解决方案，该解决方案适用于DOM的不同深度的未命名元素。

这可以通过检查每个元素并确保它在匹配元素列表中没有父元素来实现。这是我的solution，包含在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可用here。

Answer 4

如果结果仍然流向儿童，您可能想要尝试这一点，在许多情况下，JQuery仍将适用于儿童。

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

使用此方法： E> F匹配作为元素E的子元素的任何F元素。

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

Answer 5

只需你可以使用它..

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

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

Answer 6

您也可以使用$("ul li:first-child")仅获取UL的直接子女。

我同意，你需要一个ID或其他东西来识别主要的UL，否则它将只选择它们。如果你有一个带有围绕UL的ID的div，那么最简单的事情就是$("#someDiv > ul > li")

Answer 7

试试这个：

$("#myId > UL > LI")

Answer 8

我从任何深度的嵌套类都遇到了一些麻烦，所以我想出来了。它将仅选择遇到包含Jquery对象的第一级：

＆＃13;

var $elementsAll = $("#container").find(".fooClass");4

var $levelOneElements = $elementsAll.not($elementsAll.children().find($elementsAll));

$levelOneElements.css({"color":"red"})

＆＃13;

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

＆＃13;

Answer 9

1

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

可能有很多其他方式

Answer 10

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

来自.add_to_cart

的树级子项的第二个.form-item

在jquery中仅选择第一级元素

10 个答案: