blocks|key|1318837|text|$("ul+>+li+a")|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1318838|但是，如果您特别希望以最外层的ul为目标，则需要在根ul上设置一个类：|unstyled|1318839|<ul+class="rootlist">
...|1318840|然后就是：|1318841|$("ul.rootlist+>+li+a")....|1318842|另一种确保只有根li元素的方法：|1318843|$("ul+>+li+a").not("ul+li+ul+a")|1318844|它看起来很粗糙，但它应该能起到作用。|1318845|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|V|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$B|C]]|$1|I|3|J|5|F|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|Y|8|@]|9|@]|A|$B|C]]|$1|M|3|N|5|F|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$B|C]]|$1|Q|3|R|5|F|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|F|7|12|8|@]|9|@]|A|$]]]|T|$]]

<pre><code>$("ul &gt; li a")
</code></pre>

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

<pre><code>&lt;ul class="rootlist"&gt;
...
</code></pre>

<p>Then it's:</p>

<pre><code>$("ul.rootlist &gt; li a")....
</code></pre>

<p>Another way of making sure you only have the root li elements:</p>

<pre><code>$("ul &gt; li a").not("ul li ul a")
</code></pre>

<p>It looks kludgy, but it should do the trick</p>


blocks|key|1534119|text|一旦有了初始ul，就可以使用children()方法，该方法将只考虑元素的直接子元素。正如@activa所指出的，一种容易选择根元素的方法是给它一个class或id。下面假设您有一个id为root的根ul。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1534120|$('ul#root').children('li');|code-block|syntax|javascript|1534121|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.jquery.com/Traversing/children#expr^0|2M|4|E|A|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@$9|V|A|W|1|X]]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

<p>Once you have the initial ul, you can use the <a href="http://docs.jquery.com/Traversing/children#expr" rel="noreferrer">children()</a> 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 <code>root</code>.</p>

<pre><code>$('ul#root').children('li');
</code></pre>


blocks|key|1534178|text|您还可以使用$("ul+li:first-child")来仅获取UL的直接子项。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1534179|但我同意，您需要一个ID或其他东西来标识主UL，否则它将选择所有这些UL。如果你有一个包含UL+ID的div，最容易做的事情就是$("#someDiv+>+ul+>+li")|1534180|entityMap^0|6|M|0|1S|N|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

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

<p>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<code>$("#someDiv &gt; ul &gt; li")</code></p>


blocks|key|1319008|text|.add_to_cart+>>>+.form-item:eq(1)|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1319009|来自.add_to_cart的树级子级的第二个.form项|unstyled|1319010|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>.add_to_cart &gt;&gt;&gt; .form-item:eq(1)
</code></pre>

<p>the second .form-item at tree level child from the .add_to_cart</p>


blocks|key|1319050|text|如果结果仍然流向孩子，你可能想尝试一下，在许多情况下，JQuery仍然适用于孩子。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1319051|$("ul.rootlist+>+li+>+a")|code-block|syntax|javascript|1319052|使用此方法:+E+>F匹配作为元素E的子元素的任何F元素。|1319053|告诉JQuery只查找显式的子级。http://www.w3.org/TR/CSS2/selector.html|offset|length|1319054|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/CSS2/selector.html^0|0|0|0|H|13|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

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

<pre><code>$("ul.rootlist &gt; li &gt; a")
</code></pre>

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

<p>Tells JQuery to look only for explicit children.
<a href="http://www.w3.org/TR/CSS2/selector.html" rel="nofollow">http://www.w3.org/TR/CSS2/selector.html</a></p>


blocks|key|1319073|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1319074|$("#myId+>+UL+>+LI")|code-block|syntax|javascript|1319075|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

blocks|key|1319131|text|我在任何深度的嵌套类中都遇到了一些问题，所以我弄清楚了这一点。它将只选择它遇到的包含Jquery对象的第一级：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1319132|​|1319133|var+$elementsAll+=+$("#container").find(".fooClass");4

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

$levelOneElements.css({"color":"red"})|code-block|syntax|javascript|1319134|<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>|1319135|1319136|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>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:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var $elementsAll = $("#container").find(".fooClass");4

var $levelOneElements = $elementsAll.not($elementsAll.children().find($elementsAll));

$levelOneElements.css({"color":"red"})</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="fooClass" style="color:black"&gt;
Container
  &lt;div id="container"&gt;
    &lt;div class="fooClass" style="color:black"&gt;
      Level One
      &lt;div&gt;
        &lt;div class="fooClass" style="color:black"&gt;
             Level Two
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="fooClass" style="color:black"&gt;
      Level One
      &lt;div&gt;
        &lt;div class="fooClass" style="color:black"&gt;
             Level Two
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1534365|text|简单地说，你可以使用这个..|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1534366|$("ul+li+a").click(function()+{
++$(this).parent().find(">ul")...Something;
}|code-block|syntax|javascript|1534367|请参见示例：https://codepen.io/gmkhussain/pen/XzjgRE|offset|length|1534368|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/gmkhussain/pen/XzjgRE^0|0|0|6|14|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Simply you can use this.. </p>

<pre><code>$("ul li a").click(function() {
  $(this).parent().find("&gt;ul")...Something;
}
</code></pre>

<p>See example : <a href="https://codepen.io/gmkhussain/pen/XzjgRE" rel="noreferrer">https://codepen.io/gmkhussain/pen/XzjgRE</a></p>


blocks|key|1534393|text|1|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1534394|+$("ul.rootlist+>+target-element")
2+++$("ul.rootlist").find(target-element).eq(0)+(only+one+instance)
3+++$("ul.rootlist").children(target-element)|code-block|syntax|javascript|1534395|可能还有很多其他的方法|1534396|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>1   </p>

<pre><code> $("ul.rootlist &gt; target-element")
2   $("ul.rootlist").find(target-element).eq(0) (only one instance)
3   $("ul.rootlist").children(target-element)
</code></pre>

<p>there are probably many other ways</p>


<p>How can I select the link elements of only the parent <code>&lt;ul&gt;</code> from a list like this? </p>

<pre><code>&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
</code></pre>

<p></p>

<p>So in css <code>ul li a</code>, but not <code>ul li ul li a</code></p>

<p>Thanks</p>


Selecting only first-level elements in jquery

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

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

问仅选择jquery中的第一级元素
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问仅选择jquery中的第一级元素EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问仅选择jquery中的第一级元素
EN