JQuery，检索孩子和孙子

Question

Let's say I have a JQuery object which has (or points to) such a structure:

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

['parent', 'child1', 'child2', ..., 'grandchild1', ...]

Thanks

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

Answer 1

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() :

 $(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 hierarchy using 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> 

Answer 2

You can use the toArray() ^[docs] method to make your jQuery object into an Array.

var arr = my_obj.toArray();

...or the get() ^[docs] method if you don't pass it any arguments.

var arr = my_obj.get();

---

If I've misunderstood, and you're pointing to the root of the structure, and need to get its descendants, use the find() ^[docs] method method.

var descendants = my_obj.find('div');

---

jQuery has many traversal methods that let you get around the DOM structure from a given point.

---

If you only wanted children and grandchildren, and nothing deeper, do this:

var two_generations = my_obj.find('> div > div');

This will give you div elements only 2 generations deep.

If you don't want to limit it to div elements, do this:

var two_generations = my_obj.find('> * > *');

Answer 3

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:

$('#parent') //selects the parents
$('#parent').children() //selects the children
$('#parent').children().children() //selects the grandchildren