javascript JQuery，检索子孙
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6582253/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery, retrieve children and grandchildren
提问by megas
Let's say I have a JQuery object which has (or points to) such a structure:
假设我有一个 JQuery 对象，它具有（或指向）这样的结构：
<div id="parent">
<div id="child1">
<div id="grandchild1">
// ... grandchild can also have children
</div>
// ... and so on of grandchildren
</div>
<div id="child2">
</div>
// .... and so on
</div>
Is there possibility to get plain array of elements (JQuery object) from my object like this:
是否有可能像这样从我的对象中获取简单的元素数组（JQuery 对象）：
['parent', 'child1', 'child2', ..., 'grandchild1', ...]
Thanks
谢谢
P.S. Please notice that it can't be selector something like this $('div > div'), because I already have JQuery object and only from this object I need take stuff.
PS 请注意，它不能是像 $('div > div') 这样的选择器，因为我已经有了 JQuery 对象，只有从这个对象中我才需要取东西。
回答by Salman A
You can retrieve children and grandchildren using the *selector. The items will be returned in tree order. You can then get a plain array of elements using jQuery.toArray():
您可以使用*选择器检索子项和孙项。这些项目将按树顺序返回。然后，您可以使用jQuery.toArray()以下方法获取一个简单的元素数组：
$(function() {
var a = $("#wrapper").find("*").toArray();
console.log(a);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="wrapper">
<div id="parent">
<div id="child1">
<div id="grandchild1">
<div class="level-4"></div>
<div class="level-4"></div>
<div class="level-4"></div>
</div>
</div>
<div id="child2">
<div class="level-3"></div>
<div class="level-3"></div>
<div class="level-3"></div>
<div class="level-3">
<div class="level-4"></div>
<div class="level-4"></div>
<div class="level-4"></div>
</div>
</div>
</div>
</div>Following is an overkill but useful if you are more interested in iterating the hierarchyusing recursion:
如果您对使用递归迭代层次结构更感兴趣，以下是一种矫枉过正但很有用：
function recursiveIterate($node, array) {
$node.children().each(function() {
array.push(this);
recursiveIterate($(this), array);
});
}
$(function() {
var a = [];
recursiveIterate($("#wrapper"), a);
console.log(a);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="wrapper">
<div id="parent">
<div id="child1">
<div id="grandchild1">
<div class="level-4"></div>
<div class="level-4"></div>
<div class="level-4"></div>
</div>
</div>
<div id="child2">
<div class="level-3"></div>
<div class="level-3"></div>
<div class="level-3"></div>
<div class="level-3">
<div class="level-4"></div>
<div class="level-4"></div>
<div class="level-4"></div>
</div>
</div>
</div>
</div>回答by user113716
You can use the toArray()[docs]method to make your jQuery object into an Array.
您可以使用toArray()[docs]方法将您的 jQuery 对象变成一个数组。
var arr = my_obj.toArray();
...or the get()[docs]method if you don't pass it any arguments.
...或get()[docs]方法，如果您不传递任何参数。
var arr = my_obj.get();
If I've misunderstood, and you're pointing to the rootof the structure, and need to get its descendants, use the find()[docs]method method.
如果我误解了，并且您指向结构的根，并且需要获取其后代，请使用find()[docs]方法方法。
var descendants = my_obj.find('div');
jQuery has many traversal methodsthat let you get around the DOM structure from a given point.
jQuery有许多遍历方法，可让您从给定点绕过 DOM 结构。
If you onlywanted children and grandchildren, and nothing deeper, do this:
如果你只想要孩子和孙子，而没有更深层次的东西，请执行以下操作：
var two_generations = my_obj.find('> div > div');
This will give you divelements only 2 generations deep.
这将为您提供div仅 2 代深的元素。
If you don't want to limit it to divelements, do this:
如果您不想将其限制为div元素，请执行以下操作：
var two_generations = my_obj.find('> * > *');
回答by neaumusic
Hey man I'm pretty new here and I was having a similar brain fart. To get the grandchildren, I suggest using the .children() approach:
嘿，伙计，我是新来的，我也有类似的脑放屁。为了得到孙子，我建议使用 .children() 方法：
$('#parent') //selects the parents
$('#parent').children() //selects the children
$('#parent').children().children() //selects the grandchildren
