只选择jquery中的第一级元素答案

【问题标题】：Selecting only first-level elements in jquery只选择jquery中的第一级元素
【发布时间】：2010-11-01 22:46:51
【问题描述】：

如何从这样的列表中仅选择父 <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

谢谢

【问题讨论】：

标签： jquery html css css-selectors

【解决方案1】：

$("ul > li a")

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

<ul class="rootlist">
...

那就是：

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

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

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

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

【讨论】：

嗯，我发现我的问题在于使用 jquery 1.2。我已经用 1.3 替换了它，这些选择器现在工作正常。非常感谢您的回复和所有回复的人。
如果您不想添加一个类，只需 $("ul:first > li a") 显然这只适用于第一级，而不是内部级别。
感谢您的提示。我也对此进行了测试，似乎效果很好：ul.find(">li"); 如果您在 ul 变量中将“ul”节点作为 JQuery 对象。

【解决方案2】：

一旦你有了初始的 ul，你就可以使用children() 方法，它只会考虑元素的直接子元素。正如@activa 指出的那样，轻松选择根元素的一种方法是给它一个类或一个id。以下假设您有一个 id 为 root 的根 ul。

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

【讨论】：

谢谢，这对我很有帮助。也可以使用$('ul').first().children('li')
这是我的首选答案，因为我已经拥有该元素，因此将使用 .children 而不是 .find。

【解决方案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。

【讨论】：

通过使用新的 DOM 方法，您可以显着提高 :topmost 的性能 - 尝试使用 .parentElement.closest(selector)。和往常一样，IE+Edge 是唯一不支持的 >:-( 所以这里有一个 polyfill pastebin.com/JNBk77Vm

【解决方案4】：

你可以用这个..

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

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

【讨论】：

【解决方案5】：

如果结果仍然流向孩子，您可能想尝试这个，在许多情况下，JQuery 仍将适用于孩子。

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

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

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

【讨论】：

【解决方案6】：

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

不过我同意，您需要一个 ID 或其他东西来识别主 UL，否则它只会选择它们。如果您在 UL 周围有一个带有 ID 的 div，最简单的做法是$("#someDiv > ul > li")

【讨论】：

这是:first-child 的错误用法。这将选择“每个ul 中的第一个li”。原始帖子要求“从第一个 ul 开始的每个 li。”

【解决方案7】：

试试这个：

$("#myId > UL > LI")

【讨论】：

【解决方案8】：

我在使用任何深度的嵌套类时都遇到了一些问题，所以我想通了。它将只选择它遇到的包含 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】：

1

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

可能还有很多其他方法

【讨论】：

【解决方案10】：

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

.add_to_cart 中树级子级的第二个 .form-item

【讨论】：

这个问题甚至没有意义
>>> 那是什么？这个选择器有名字吗？它甚至是有效的选择器吗？还是开玩笑？