JQuery, récupérer les enfants et les petits-enfants

Question

Disons que j'ai un objet JQuery qui a (ou des points à) une telle 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> 

est possible là pour obtenir simple tableau d'éléments (objet JQuery) de mon objet comme celui-ci:

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

Merci

PS Veuillez noter qu'il ne peut pas être un sélecteur quelque chose comme ce $ ('div> div'), parce que j'ai déjà l'objet JQuery et seulement de cet objet j'ai besoin de prendre des choses.

Answer 1

Vous pouvez récupérer les enfants et les petits-enfants à l'aide du sélecteur *. Les articles seront retournés dans l'ordre des arbres. Vous pouvez alors obtenir un simple tableau d'éléments en utilisant 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>

Voici un surpuissant mais utile si vous êtes plus intéressé par itérer la hiérarchie utilisant récursion:

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

Vous pouvez utiliser la méthode toArray()^[docs] pour transformer votre objet jQuery en un tableau.

var arr = my_obj.toArray(); 

... ou la méthode get()^[docs] si vous ne passez pas d'arguments.

var arr = my_obj.get(); 

---

Si j'ai mal compris, et vous pointez la racine de la structure, et de faire approuver ses descendants, utilisez la méthode de la méthode find()^[docs].

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

---

jQuery has many traversal methods qui vous permettent de vous déplacer la structure DOM à partir d'un point donné.

---

Si vous seulement voulait des enfants et petits-enfants, et rien de plus profond, faites ceci:

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

Cela vous donnera div éléments seulement deux générations profondes.

Si vous ne souhaitez pas limiter à div éléments, faites ceci:

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

Answer 3

Hé mec Je suis assez nouveau ici et j'avais un pet de cerveau similaire. Pour obtenir les petits-enfants, je suggère d'utiliser le.children() approche:

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