javascript - 如何获得完整的后代层次结构？

Question

给定父级，我怎样才能得到它的后代，以便保留他们的层次结构。

parent > des1 > des2 > des3

parent.find('*') 只是不按顺序返回，它给出

find('des1, des2. des3') 

我期待的是

find('des1 des2 des3')

Answer 1

有很多方法可以traverse使用 jQuery。这是一种方法。我正在使用以下标记:

<div id="demoParent">
  <div id="des1">
    <div id="des2"> 
      <div id="des3">
        hello world
      </div>
    </div>
  </div>
</div>

我使用这个递归函数向下遍历并返回一个具有层次结构的字符串:

function getHierarchy(selector) {
    // temp variable to hold the hierarchy as an array
    var hierarchy = [];
    // if selector element has a :first-child...
    while ($(selector).children(':first-child').length > 0) {
        // then push it into the array and then traverse into the :first-child
        hierarchy.push($(selector).children(':first-child').attr('id'));
        selector = $(selector).children(':first-child');
    }
    // when there are no more :first-child elements, return string
    // formatted like elemA > elemB > elemC > elemD
    return hierarchy.join(' > ');
}

当我这样调用这段代码时:alert(getHierarchy('#demoParent'));

我收到此结果作为警报:des1 > des2 > des3