jQuery, recuperar hijos y nietos

Question

Digamos que tengo un objeto jQuery que tiene (o puntos a) una estructura de este tipo:

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

¿Hay posibilidad de obtener array plano de elementos (objeto jQuery) de mi objeto como esta:

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

Gracias

PS Tenga en cuenta que no puede haber un selector como este $ ('div> div'), porque ya tengo objeto JQuery y solo de este objeto necesito tomar cosas.

Answer 1

Puede recuperar hijos y nietos utilizando el selector de *. Los artículos serán devueltos en orden de árbol. A continuación, puede obtener un array plano de elementos utilizando 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>

que sigue es una exageración pero es útil si usted está más interesado en la iteración de la jerarquía utilizando la recursividad:

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

Puede utilizar el método toArray()^[docs] para convertir su objeto jQuery en una matriz.

var arr = my_obj.toArray(); 

... get()^[docs] o el método si no lo pasa ningún argumento.

var arr = my_obj.get(); 

---

Si he entendido bien, y que está apuntando a la raíz de la estructura, y la necesidad de conseguir sus descendientes, utilice el método find()^[docs] método.

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

---

jQuery has many traversal methods que le permiten moverse por la estructura del DOM desde un punto dado.

---

Si solamente quería tener hijos y nietos, y nada más profunda, hacer esto:

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

Esto le dará div elementos sólo 2 generaciones de profundidad.

Si no desea limitarlo a div elementos, haga lo siguiente:

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

Answer 3

Hola, soy bastante nuevo aquí y estaba teniendo un pedo cerebral similar. Para obtener los nietos, sugiero usar el.enfoque niños():

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