Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

238
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda