(Re-) DOM을 특정 투영 JavaScript로 모델링 || jQuery

Question

DOM 노드 대신 특정 속성을 사용하여 DOM 트리의 특정 투영을 만들고 싶습니다.

은의 우리가이 HTML 있다고 가정 해 봅시다 :

<div data-foo="bar0"> 
    <div data-foo="bar1"> 
     <div> 
      <div data-foo="bar2"> 
      </div> 
      <div data-foo="bar3"> 
      </div> 
     </div> 
    </div> 
    <div data-foo="bar4"> 
    </div> 
</div> 

나는 단지 data-foo 특성을 좀하고 싶습니다,하지만 DOM 트리의 배열을 누르고 있습니다. (data-foo 속성이없는 모든 노드는 무시한다.)

은이 같은 채취 한 후 상기 실시 예의 결과 상상 (로서는 배열/개체) 을

someStorageVariableForTheDOMFootPrint["bar0"] 

한다 그 안에 두 개의 인덱스, bar1 및 bar4이 있습니다. bar1 index는 배열 bar2과 bar3의 두 개의 인덱스가 포함 된 배열이어야합니다. 이들은 모두 빈 변수, 색인 및 배열/객체 구조가 될 수 있습니다.

DOM 노드가 없으며 컨텍스트가 없으며 DOM-Tree의 구조에 data-foo 속성 만 저장됩니다.

어떻게 시작해야합니까?

Answer 1

기본적으로, 당신이하고 싶은 아마 이런 걸보고 그 결과로, 당신의 DOM 객체 그래프의 변화의 객체 그래프 만드는 것입니다 :

{ 
    "foo": "bar0", 
    "children": [ 
     { 
      "foo": "bar1", 
      "children": [ 
       { 
        "foo": "bar2", 
        "children": [] 
       }, 
       { 
        "foo": "bar3", 
        "children": [] 
       } 
      ] 
     }, 
     { 
      "foo": "bar4", 
      "children": [] 
     } 
    ] 
} 

내가 관심을 가지고, 그리고 발견 놀라 울 정도로 쉽게 해야 할 일 : Live Example

function graph(element) { 
    var rv, child, $element, index; 

    // Wrap the element 
    $element = $(element); 

    // Our non-DOM equivalent object 
    rv = { 
     foo: $element.attr("data-foo") 
    }; 

    // Get its children 
    rv.children = $element.children().get().map(graph); 

    // If any children are missing foo, replace them with their children 
    index = 0; 
    while (index < rv.children.length) { 
     child = rv.children[index]; 
     if (!child.foo) { 
      // No foo, replace the element with its children 
      replaceElementWith(rv.children, index, child.children); 
      index += child.children.length; 
     } else { 
      ++index; 
     } 
    } 
    return rv; 
} 

// Replace the array element at the given position with the elements from 
// the given array 
function replaceElementWith(array, index, newElements) { 
    var args = [index, 1]; 
    if (newElements.length) { 
     args.push.apply(args, newElements); 
    } 
    array.splice.apply(array, args); 
}