Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

233
Views
Javascript reorder HTML element based on attribute value

I have the following HTML:

<div class="wrapper">
    <div class="item" id="item-1">
    
    </div>
    <div class="item" id="item-2">
    
    </div>
    <div class="item" id="item-3">
    
    </div>
</div>

And in javascript I'm currently applying filters & sort to the results of an array:

results = Object.keys(list).filter(.....);
results = results.sort((a, b) => (....) ? 1 : -1);

// After the results have been filtered & sorted, hide all HTML elements:
document.querySelectorAll('.item').forEach(i => i.classList.add('d-none'));

// And then proceed to show only the results that have been filtered & sorted:
results.forEach(index => 
{
    let id = list[index].id;
    let item = document.getElementById('item-' + id);

    item.classList.remove('d-none');
});

This works great. The problem is that now I need to move the HTML elements according to the results array, specifically with the id field.

A) Expected output: Array ids [2, 1]

<div class="wrapper">
    <div class="item" id="item-2">

    </div>
    <div class="item" id="item-1">

    </div>
    <div class="item d-none" id="item-3">

    </div>
</div>

B) Expected output: Array ids [2]

<div class="wrapper">
    <div class="item" id="item-2">

    </div>
    <div class="item d-none" id="item-1">

    </div>
    <div class="item d-none" id="item-3">

    </div>
</div>
about 4 years ago · Juan Pablo Isaza
3 answers
Answer question

0

One way would be to

  1. iterate the result ids and get the correspondig object from the dom (combined with your last .forEach round removing the d-done class)
  2. get all d-done elements and combine both lists
  3. convert to html and reset innerHTML of the wrapper

let results = [2,1]

let wrapper = document.getElementById('wrapper-id')

wrapper.innerHTML = results.map(id => document.querySelector('#item-' + id))
                  .concat([...document.querySelectorAll('.d-none')])
                  .map(elem => elem.outerHTML)
                  .join('')
  
  <div class="wrapper" id="wrapper-id">
  <div class="item" id="item-1">
      item-1
  </div>
  <div class="item" id="item-2">
      item-2
  </div>
  <div class="item d-none" id="item-3">
      item-3
  </div>
  </div>

about 4 years ago · Juan Pablo Isaza Report

0

You can move elements to the top, using prepend function.

On bellow example, I only implement the logic about move elements, and I didn't protected against non existent elements. You should add your logic's about filtering, etc. and protect for possible errors.

function sortDivs() {
  let list = [2, 1];

  let mainDiv = document.querySelectorAll('.wrapper')[0];
  list.reverse().forEach(n => mainDiv.prepend(document.getElementById('item-'+n)));
}
.item { 
  border: black solid;
}
<div class="wrapper">
    <div class="item" id="item-1">
    item-1
    </div>
    <div class="item" id="item-2">
    item-2
    </div>
    <div class="item" id="item-3">
    item-3
    </div>
</div>
<br>
<button onClick="sortDivs()"> sort DIVs</button>

about 4 years ago · Juan Pablo Isaza Report

0

Solved.

I had several problems:

The first one was instead of using Object.keys(results).filter I should be using results.filter, because I don't need to get only the Keys, which was making things way harder.

Secondly, the logic to apply in order to have everything re-organizing according to multiple filters is:

  1. Sort / filter everything
  2. Hide all items (using d-none)
  3. Grab all the wrapper children const wrapperItems = wrapper.children
  4. Create a variable named wrapperNewItems that holds the new sorted/filtered items
  5. Create a variable that holds which ID's (item-1, item-2, etc) have been sorted/filtered
  6. Push the items sorted into the variable and remove d-none
  7. Push the items that were NOT sorted into the variable and keep d-none

Translated into code:

document.querySelectorAll('.item').forEach(i => i.classList.add('d-none'));

const wrapper = document.getElementsByClassName('wrapper')[0];
// Saves the existing children
const wrapperItems = wrapper.children;
// Holds the new items ordered perfectly
let wrapperNewItems = [];
// Holds names that were filtered (item-1, item-2, etc)
let listOfNamesFiltered = [];

// Shows only the items filtered
results.forEach(item => 
{
    let name = 'item-' + item.id;
    let el = document.getElementById(name);

    el.classList.remove('d-none');

    wrapperNewItems.push(el);
    listOfNamesFiltered.push(name);
});

for (let i = 0; i < wrapperItems.length; i++)
{
    let item = wrapperItems[i];
    let name = item.id; // id="" already contains "item-{id}"      

    // If the name already exists in the list, we won't add it again
    if (listOfNamesFiltered.includes(name))
        continue;

    wrapperNewItems.push(item);
}

// Clears the div
wrapper.innerHTML = '';

// Appends the items once again
for (let i = 0; i < wrapperNewItems.length; i++)
    wrapper.innerHTML += wrapperNewItems[i].outerHTML;
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!