blocks|key|1146935|text|您可以使用find()|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1146936|tbl.find(">+tbody+>+tr")|1146937|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/find/^0|5|6|5|6|0|0|0|O|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@$9|S|A|T|1|U]]|E|$]]|$1|F|3|G|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

You can use <a href="http://api.jquery.com/find/" rel="noreferrer"><code>find()</code></a>:

<code>tbl.find("&gt; tbody &gt; tr")</code>

blocks|key|1146963|text|http://api.jquery.com/child-selector/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1146964|$('tb1+>+tr')|style|CODE|1146965|entityMap|0|LINK|mutability|MUTABLE|url^0|0|11|0|0|0|D|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@$A|P|B|Q|1|R]]|C|$]]|$1|D|3|E|5|6|7|S|8|@$A|T|B|U|F|G]]|9|@]|C|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|4]]]]

<a href="http://api.jquery.com/child-selector/" rel="nofollow noreferrer">http://api.jquery.com/child-selector/</a>

<code>
$('tb1 > tr')
</code>

blocks|key|1147028|text|这就是为什么要小心嵌套表的原因。我真的希望你用它们来做数据，而不是页面布局。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1147029|另一个可能会毁了你一天的问题是在嵌套表上使用CSS选择器……基本上也有同样的问题--如果不选择内表中的TR元素，就无法选择外层表中的TR元素。(不能使用子选择器，因为它不是在IE6中实现的)|1147030|这应该是可行的：|1147031|$("#table1+>+tbody+>+tr")|code-block|syntax|javascript|1147032|但是，我建议您硬编码TBODY元素，因为您不应该依赖浏览器为您创建它。|1147033|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|R|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

This is exactly the reason why one should be careful with nesting tables. I really hope that you use them for data and not page layout.

Another issue that will probably ruin your day is using CSS selectors on nested tables... you basically have the same issue - you are unable to select TR elements of the outer table without selecting those inside the inner table, too. (You cannot use the child selector because it is not implemented in IE6)

This should work:

<pre><code>$("#table1 &gt; tbody &gt; tr")
</code></pre>

However, I recommend that you hardcode the TBODY element, since you should not rely on the browser to create it for you.

blocks|key|932633|text|正如@jave.web在评论中提到的那样|type|unstyled|depth|inlineStyleRanges|entityRanges|data|932634|要搜索元素的直接子元素，请使用.children()。它将只搜索直接的子级，而不会遍历更深的部分。http://api.jquery.com/children/|offset|length|style|CODE|932635|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/children/^0|0|F|B|1D|V|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@$D|R|E|S|F|G]]|9|@$D|T|E|U|1|V]]|A|$]]|$1|H|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

As @jave.web mentioned in the comments

To search through the direct children of an element use <code>.children()</code>. It will only search through the direct children and not traverse any deeper. <a href="http://api.jquery.com/children/" rel="noreferrer">http://api.jquery.com/children/</a>

blocks|key|932682|text|如果您有两个元素的ids，并希望找到直接的元素，请使用以下代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|932683|$("#parent+>+#two")|code-block|syntax|javascript|932684|如果你想要嵌套搜索，你可以使用find。这里有详细的解释。https://handyopinion.com/jquery-selector-find-nested-child-elements/|offset|length|932685|entityMap|0|LINK|mutability|MUTABLE|url|https://handyopinion.com/jquery-selector-find-nested-child-elements/^0|0|0|T|1W|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]]]]

If you have ids of both elements and you want to find direct element use below code 

<pre><code>$("#parent &gt; #two")
</code></pre>

If you want a nested search you can use find.
It is explained in detail here.
<a href="https://handyopinion.com/jquery-selector-find-nested-child-elements/" rel="nofollow noreferrer">https://handyopinion.com/jquery-selector-find-nested-child-elements/</a>

I have a table structure like this:

<pre><code>&lt;table1&gt;
 &lt;tbody&gt;
 &lt;tr&gt;
 &lt;td&gt;&lt;/td&gt;
 ...
 &lt;td&gt;
 &lt;table2&gt;
 &lt;tbody&gt;
 &lt;tr&gt;
 &lt;td&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/tbody&gt;
 &lt;/table&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;/tbody&gt;
 &lt;/table&gt;
</code></pre>

In javascript, I have a variable <code>tbl</code> with value of <code>$(table1)</code>, and then I want to get all direct child elements (tr) of <code>&lt;tbody&gt;</code> of <code>table1</code>.
My code is :

<pre><code>$('tr', tb1)
</code></pre>

Apparently it returns all <code>&lt;tr&gt;</code> elements in table1 and table2.
I think I can get by

<pre><code>$('tr', tb1).not(function(){return $(this).parent().parent()[0] != tb1;})
</code></pre>

or this kind of logic.

I know <code>$('table1 &gt; tbody &gt; tr')</code> can get the direct child <code>tr</code>. Unfortunately I can not use this.

Anyone has good idea about this?

Thanks.

How to get only direct child elements by jQuery function

我有一个这样的表结构：<table1> <tbody> <tr> <td></td> ... <td> <table2> <tbody> <tr> <td></td> </tr...

问如何通过jQuery函数只获取直接子元素
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何通过jQuery函数只获取直接子元素EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何通过jQuery函数只获取直接子元素
EN