JQuery와, 자녀와 손자를 검색

Question

는이 전 (포인트 나)와 같은 구조를 가지고 JQuery와 객체가 있다고 가정 해 봅시다 이 같은 :

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

감사

PS 그것은 내가 이미 JQuery 객체를 가지고 있기 때문에이 객체 (from take stuff)를 필요로하기 때문에이 $ ('div> div')와 같은 선택기가 될 수 없다는 점에 유의하십시오.

Answer 1

당신은 아이들과 * 선택기를 사용 손자를 검색 할 수 있습니다. 항목은 트리 순서로 반환됩니다. 그런 다음 jQuery.toArray()를 사용하여 요소의 일반 배열을 얻을 수 있습니다 :

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>

: 당신이 계층 구조 사용하여 재귀 반복에 더 관심이 있다면

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

다음은 잔인한하지만 유용

Answer 2

toArray()^[docs] 메서드를 사용하여 jQuery 객체를 배열로 만들 수 있습니다.

var arr = my_obj.toArray(); 

... 또는 당신이 어떤 인수를 전달하지 않을 경우 get()^[docs] 방법.

var arr = my_obj.get(); 

---

내가 잘못 이해 한 경우

, 당신은 구조의 루트를 가리키는 및 find()^[docs] 방법 방법을 사용, 그 자손을 얻을 필요가 있습니다.

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

---

주어진 지점에서 DOM 구조의 주위에하자 jQuery를 has many traversal methods. 당신 만 어린이와 손자, 깊은 아무것도를 원한다면

---

, 이렇게 :

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

이것은 당신에게 단지 2 세대 깊은 div 요소를 제공 할 것입니다.

당신이 div 요소를 제한하지 않으려면 다음을 수행

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

Answer 3

안녕하세요, 저는 여기 꽤 예쁘고 비슷한 두뇌 방구를 가지고있었습니다. 손주를 얻으려면 나는을 사용하는 것이 좋습니다.children() 접근 방식 :

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