Question

说我有10个元素的数组，其中一些实际上是其他元素的子元素。我将如何订购此数组，以便让顶级父母排在第一位，而最深的孩子排在最后？

[
    input,
    select,
    radio,
    div (containing some of the form elements in the array),
    h2,
    div (containing the h2 in the array),
    form,
    textarea,
    a,
    span
]

在这种特殊情况下，form元素可能是最高的父级，但是我正在寻找的解决方案是在没有任何此类知识的情况下创建这样的订单

Answer 1

您可以使用Array.map()为每个元素创建一个得分-得分基于该元素具有的父代数目。现在，您可以按元素的分数对它们进行排序，并使用另一个Array.map()提取元素：

const els = Array.from(document.querySelectorAll('div *'))
  .map(el => {
    let score = 0, p = el;
    
    while(p = p.parentNode) { score++; }
    
    return [el, score];
  })
  .sort(([ea, sa], [eb, sb]) => sa - sb)
  .map(([el]) => el)

console.log(els);

<div>
  <form>
    <div class="form-els-container">
      <input>
      <select></select>
      <input type="radio">  
      <textarea></textarea>
    </div>
  </form>
  <div class="h2-container">
    <h2>H2</h2>
  </div>
  <a>a</a>
  <span></span>
</div>

如何通过包含纯JS中的元素顺序来对数组进行排序

1 个答案: