DOM 요소 자식의 Jquery 다차원 배열

Question

나는 id의 DOM 계층 구조를 자바 스크립트 배열로 가져 오려고합니다. (나는 DIVs 및 toArray 재정렬 할 정렬 가능한 jQuery UI를 사용하고 평면 (비 계층 적) 결과 현재 직렬화합니다.

코드는 다른 SOF jfiddle 솔루션을 기반으로하며, 여기 내 샌드 박스입니다 :

어떻게 하나는 DOM 어린이를 반복하고 다차원 배열에 자신의 아이디의 기록 가겠어요http://jsfiddle.net/rfwkQ/2/

업데이트는?

편집 :

function getChildren(elem) { 
var parent = []; 
if ($(elem).children().length !== 0) { 
    $(elem).children().each(function() { 

     if ($(this).find('> div').children().size() !== 0) { 
      var child = getChildren(this); 
      parent.push(child); 
     } else { 
      parent.push(this.id); 
     } 
    }); 
    return parent; 
} 
} 

나는 div를하고 자녀를 반복하려고 위의 기능을 조립했습니다. div가 다차원 배열로 반환합니다.

기타 질문 상위 수준 중첩 div에 빈 문자열 요소를 만듭니다. 비어 있지 않은지 여부를 확인하는 대신 내 로직에서이를 어떻게 해결할 수 있습니까? (어쨌든 좋은 아이디어가 될 것입니다.)

샌드 박스 2.0 : 링크는 아래의 업데이트

마지막으로 해결 (감사로는 Freenode의 IRC에 #jquery에 'shoky') 당신은 두 가지를 사용하여 DOM을 걸을 수

http://jsfiddle.net/rfwkQ/8/

function getChildren(elem) { 
var parent = []; 

$(elem).children('div').each(function() { 
    parent.push( 
     $(this).children('div').length ? getChildren(this) : this.id); 
}); 

return parent; 
} 

Answer 1

DOM 노드의 속성 : firstChild 및 nextSibling. document.body으로 시작하여 firstChild을 가져오고 거기에서 각 firstChild 및 nextSibling이 null이 아님을 확인하십시오.

재귀를 사용하면 가장 빠르지 만 가장 쉽습니다.

내 의견에 말했듯이 일반적으로 DOM은 자신의 고유 한 복사본을 만들고 싶지 않습니다. DOM을 쿼리하거나 쿼리하여 해당 구조의 완전히 새로운 복사본을 만들지 않고도 거의 모든 용도로 사용할 수 있기 때문입니다. 변화가 생기 자마자 즉시 구식입니다.

function getIdList(parent) { 
    var list = []; 
    var node = parent.firstChild; 
    while (node) { 
     if (node.nodeType == 1 && node.tagName == "DIV") { 
      list.push(getIdList(node)); 
     } 
     node = node.nextSibling; 
    } 
    // if no children, just return the id of the parent 
    if (list.length == 0) { 
     list = parent.id; 
    } 
    return(list); 
} 

그리고 당신의 HTML에 작업 데모 : http://jsfiddle.net/jfriend00/TLVr7/ (중첩 된 배열의 텍스트 버전을 볼 수 아래로 스크롤)

다음은이 문제를 해결하기 위해 자바 스크립트 일부 일반입니다.