Steps for sorting an array based on the order of its elements in vanilla JavaScript

Question

Steps for sorting an array based on the order of its elements in vanilla JavaScript

If I have an array of 10 elements, where some are children of others, how can I rearrange this array so that the top parents come first and the deepest children come last?

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

In this scenario, the form element might be the highest-level parent, but I'm seeking a solution to order them without any prior knowledge of their parent-child relationships.

javascript arrays javascript-objects

Answer 1

Answer №1

To assign a score to each element based on the number of parents it has, you can utilize the Array.map() method. Once the scores are determined, you can proceed to sort the elements by their respective scores and then extract the elements using yet another Array.map():

const elements = Array.from(document.querySelectorAll('div *'))
  .map(element => {
    let score = 0, parentElement = element;
    
    while(parentElement = parentElement.parentNode) { score++; }
    
    return [element, score];
  })
  .sort(([eleA, scoreA], [eleB, scoreB]) => scoreA - scoreB)
  .map(([element]) => element)

console.log(elements);

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

Answer 2

To assign a score to each element based on the number of parents it has, you can utilize the Array.map() method. Once the scores are determined, you can proceed to sort the elements by their respective scores and then extract the elements using yet another Array.map():

const elements = Array.from(document.querySelectorAll('div *'))
  .map(element => {
    let score = 0, parentElement = element;
    
    while(parentElement = parentElement.parentNode) { score++; }
    
    return [element, score];
  })
  .sort(([eleA, scoreA], [eleB, scoreB]) => scoreA - scoreB)
  .map(([element]) => element)

console.log(elements);

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

Steps for sorting an array based on the order of its elements in vanilla JavaScript

Answer №1

Similar questions

Deleting a task in a React functional component with hooks is simple and can be done by

React has reached the maximum update depth limit

D3 bar chart displaying identical values but with varying data sets

Converting 1D array values into 2D coordinates

The table value is only updated once with the onclick event, but the updated value is not displayed when the event is clicked again

Angular disrupts the functionality of jQuery slideshow

Unable to animate a second click using jQuery/CSS

Personalizing the label of a select input using materialui

The like button seems to be malfunctioning and I'm not sure what the issue is

What is the method for creating text that appears when the mouse is hovered over it?

What is the best way to calculate the total of multiple columns using JavaScript and jQuery?

Navigating back to the original page after venturing to a different one - react

Transforming a request from Angular to PHP through formatting

Utilize Angular's MatTableDataSource to filter data by comparing nested array values with an array selected from a multiselect

Counting and Arranging Numerous Commitments in the World of Javascript

Getting User Input with HTML and JavaScript

When a user enters their ID, I endeavor to generate a personalized visiting card using canvas

Building a bespoke search input for the DataTables JQuery extension

What is the process of generating a dynamic card/button element on an ASP.net webpage using information from the backend database?

Collapse a previously used item when a new item is opened within Angular