1

Como posso classificar elementos no DOM utilizando JavaScript puro, para ser mais claro, supomos que temos uma página de produtos estática, além dos produtos tem um campo para classificar os mesmos pelo preço.

body {
    text-align: center
}
select {
    border: 0;
    font-family: sans-serif !important;
    padding: 4px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.clearfix {
    overflow: auto;
}
.produtos {
    display: block;
    margin: 0 auto;
    width: 90%;
}
.produtos .item {
    float: left;
    margin-right: 1%;
    width: 24%;
}
.produtos .item:nth-child(4n+0) {
    margin-right: 0;
}
.produtos .item h2 {
    font-family: sans-serif;
    font-size: 1.5em;
    margin: 0;
    padding: 0;
}
.produtos .item h3 {
    font-family: sans-serif;
    font-size: 1em;
    font-weight: 300;
}
<select>
    <option>Ordenar por:</option>
    <option value="maior_preco">Maior Preço</option>
    <option value="menor_preco">Menor Preço</option>
</select>

<div class="produtos clearfix">
    <div class="item">
        <img src="http://via.placeholder.com/300x150" />
        <h2>Produto 04</h2>
        <h3>R$ 1.564,00</h3>
    </div>
    <div class="item">
        <img src="http://via.placeholder.com/300x150" />
        <h2>Produto 07</h2>
        <h3>R$ 322,00</h3>
    </div>
    <div class="item">
        <img src="http://via.placeholder.com/300x150" />
        <h2>Produto 01</h2>
        <h3>R$ 10,99</h3>
    </div>
    <div class="item">
        <img src="http://via.placeholder.com/300x150" />
        <h2>Produto 03</h2>
        <h3>R$ 153,99</h3>
    </div>
    <div class="item">
        <img src="http://via.placeholder.com/300x150" />
        <h2>Produto 06</h2>
        <h3>R$ 2,00</h3>
    </div>
    <div class="item">
        <img src="http://via.placeholder.com/300x150" />
        <h2>Produto 08</h2>
        <h3>R$ 500,00</h3>
    </div>
    <div class="item">
        <img src="http://via.placeholder.com/300x150" />
        <h2>Produto 05</h2>
        <h3>R$ 2.999,99</h3>
    </div>
    <div class="item">
        <img src="http://via.placeholder.com/300x150" />
        <h2>Produto 02</h2>
        <h3>R$ 768,99</h3>
    </div>
</div>

2 Respostas 2

1

Assumindo que tem um array de produtos construído, que são os aparecem na página, pode utilizar a função sort para aplicar uma ordenação por qualquer critério que pretenda. Esta função recebe uma função de comparação com as regras de comparação entre cada elemento.

Considerando produtos com a seguinte estrutura:

{
    imagem: string,
    nome: string,
    preco: double
}

Podemos ordenar do maior preço para o menor com:

produtos.sort(function(a,b){
  if (a.preco > b.preco) {
    return -1;
  }
  else if (b.preco > a.preco) {
    return 1;
  }
  else {
    return 0;
  }
});

Lembrando que o sort recebe como parametro os 2 elementos a comparar, neste exemplo o a e o b, e devolve:

  • < 0 se o a for para ficar antes do b
  • > 0 se o a for para ficar depois do b
  • 0 mantem os dois na ordem em que estão

Outra forma bem mais simplificada e compacta de obter o mesmo é:

produtos.sort((a,b) => b.preco - a.preco);

Que não só obtêm os retornos através da subtração assim como usa uma Arrow Function em vez de uma função normal. E para a ordenação do menor preço basta inverter a lógica da comparação:

produtos.sort((a,b) => a.preco - b.preco);

Veja o seu código a funcionar com este principio:

let produtos = [
  {
    "imagem":"http://via.placeholder.com/300x150",
    "nome":"Produto 04",
    "preco":1564
  },
  {
    "imagem":"http://via.placeholder.com/300x150",
    "nome":"Produto 07",
    "preco":322
  },
  {
    "imagem":"http://via.placeholder.com/300x150",
    "nome":"Produto 01",
    "preco":10.99
  },
  {
    "imagem":"http://via.placeholder.com/300x150",
    "nome":"Produto 03",
    "preco":153.99
  },
  {
    "imagem":"http://via.placeholder.com/300x150",
    "nome":"Produto 06",
    "preco":2
  },
  {
    "imagem":"http://via.placeholder.com/300x150",
    "nome":"Produto 08",
    "preco":500
  },
  {
    "imagem":"http://via.placeholder.com/300x150",
    "nome":"Produto 05",
    "preco":2999.99
  },
  {
    "imagem":"http://via.placeholder.com/300x150",
    "nome":"Produto 02",
    "preco":768.99
  }
];

function mostrarProdutos(){
  let novoHtml = "";
  
  for (let i = 0; i < produtos.length; ++i){
    novoHtml += `<div class="item">
                    <img src="${produtos[i].imagem}" />
                    <h2>${produtos[i].nome}</h2>
                    <h3>${produtos[i].preco.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })}</h3>
                </div>`;
  }
  
  document.querySelector(".produtos").innerHTML = novoHtml;
}

const selectOrdenacao = document.querySelector("select");

selectOrdenacao.addEventListener("change", function(){
  if (selectOrdenacao.value == "maior_preco"){
    produtos.sort((a,b) => b.preco - a.preco);
  }
  else if (selectOrdenacao.value == "menor_preco"){
    produtos.sort((a,b) => a.preco - b.preco);
  }
  mostrarProdutos();
});

mostrarProdutos();
body {
    text-align: center
}
select {
    border: 0;
    font-family: sans-serif !important;
    padding: 4px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.clearfix {
    overflow: auto;
}
.produtos {
    display: block;
    margin: 0 auto;
    width: 90%;
}
.produtos .item {
    float: left;
    margin-right: 1%;
    width: 24%;
}
.produtos .item:nth-child(4n+0) {
    margin-right: 0;
}
.produtos .item h2 {
    font-family: sans-serif;
    font-size: 1.5em;
    margin: 0;
    padding: 0;
}
.produtos .item h3 {
    font-family: sans-serif;
    font-size: 1em;
    font-weight: 300;
}
<select>
    <option>Ordenar por:</option>
    <option value="maior_preco">Maior Preço</option>
    <option value="menor_preco">Menor Preço</option>
</select>

<div class="produtos clearfix">
    
</div>

A função mostrarProdutos constrói o html todo que o <div class="produtos clearfix"> tinha estaticamente com base no array de produtos e aplica-o através da propriedade innerHTML.

Assim no change do <select> resta apenas alterar a ordem dos elementos no array produtos com base no valor escolhido e voltar a chamar a função mostrarProdutos.

1

Realmente sort é a maneira mais fácil, porém para aplicar direto ao DOM, sem alterar a estrutura, é necessário aplicar um expressão regular e formatar o valor para que possa ser tratado na função, exemplo...

function ordenar() {

let op = document.getElementById("ord").value;
let itens = document.querySelectorAll('.item');
let itensNV = [];

function mpreco(a,b) {
     return parseFloat(a.preco.replace(/R\$|\.|\,|\s/g, "")) < parseFloat(b.preco.replace(/R\$|\.|\,|\s/g, "")) ? -1 : 1; }
               

function mapreco(a,b) {
     return parseInt(a.preco.replace(/R\$|\.|\,|\s/g, "")) > parseInt(b.preco.replace(/R\$|\.|\,|\s/g, "")) ? -1 : 1; }
              

for(let i = 0; i < itens.length; i++) {
	let content = {
		html : itens[i],
        preco : itens[i].children[2].textContent
	}
    itensNV.push(content);
}

switch(op) {
      case 'maior_preco':
			itensNV = itensNV.sort(mapreco);
      break;
      
      case 'menor_preco':
			itensNV = itensNV.sort(mpreco);
      break;
}

document.querySelector('.produtos').innerHTML = '';

for(let i = 0; i < itensNV.length; i++)
   document.querySelector('.produtos').appendChild(itensNV[i].html);

}
    body {
        text-align: center
    }
    select {
        border: 0;
        font-family: sans-serif !important;
        padding: 4px;
        text-transform: uppercase;
        margin-bottom: 10px;
    }
    .clearfix {
        overflow: auto;
    }
    .produtos {
        display: block;
        margin: 0 auto;
        width: 90%;
    }
    .produtos .item {
        float: left;
        margin-right: 1%;
        width: 24%;
    }
    .produtos .item:nth-child(4n+0) {
        margin-right: 0;
    }
    .produtos .item h2 {
        font-family: sans-serif;
        font-size: 1.5em;
        margin: 0;
        padding: 0;
    }
    .produtos .item h3 {
        font-family: sans-serif;
        font-size: 1em;
        font-weight: 300;
    }
<select onchange="ordenar()" id="ord">
        <option>Ordenar por:</option>
        <option value="maior_preco">Maior Preço</option>
        <option value="menor_preco">Menor Preço</option>
    </select>

    <div class="produtos clearfix">
        <div class="item">
            <img src="http://via.placeholder.com/300x150" />
            <h2>Produto 04</h2>
            <h3>R$ 1.564,00</h3>
        </div>
        <div class="item">
            <img src="http://via.placeholder.com/300x150" />
            <h2>Produto 07</h2>
            <h3>R$ 322,00</h3>
        </div>
        <div class="item">
            <img src="http://via.placeholder.com/300x150" />
            <h2>Produto 01</h2>
            <h3>R$ 10,99</h3>
        </div>
        <div class="item">
            <img src="http://via.placeholder.com/300x150" />
            <h2>Produto 03</h2>
            <h3>R$ 153,99</h3>
        </div>
        <div class="item">
            <img src="http://via.placeholder.com/300x150" />
            <h2>Produto 06</h2>
            <h3>R$ 2,00</h3>
        </div>
        <div class="item">
            <img src="http://via.placeholder.com/300x150" />
            <h2>Produto 08</h2>
            <h3>R$ 500,00</h3>
        </div>
        <div class="item">
            <img src="http://via.placeholder.com/300x150" />
            <h2>Produto 05</h2>
            <h3>R$ 2.999,99</h3>
        </div>
        <div class="item">
            <img src="http://via.placeholder.com/300x150" />
            <h2>Produto 02</h2>
            <h3>R$ 768,99</h3>
        </div>
    </div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .