How to sort three divs according to an attribute of it?

7

I have 3 divs:

<div id='pai'>
    <div class='produtos' contagem='2'></div>
    <div class='produtos' contagem='1'></div>
    <div class='produtos' contagem='3'></div>
</div>

I would like to swap them, so that the divs with the count attribute with the highest number were first (in descending order).

How do I get this in such a way that the count numbers I do not know, that is, they may not be the ones I set as an example?

    
asked by anonymous 09.01.2015 / 17:10

4 answers

8

You can extract an array of divs with jQuery and sort it with the Array.sort .

var divList = $(".produtos");
divList.sort(function(a, b) {
    // para ordem decrescente; use a - b para crescente
    return $(b).attr("contagem") - $(a).attr("contagem")
});
$("#pai").html(divList);

Source : SOEn - Javascript / jQuery: Reordering divs according to data-attribute values

    
09.01.2015 / 17:22
6

I suggest for security to clone the elements and re-insert them in HTML:

var novosElementos = $('#pai div').get().sort(function (a, b) {
    return a.getAttribute('contagem') - b.getAttribute('contagem')
}).map(function(el){
    return $(el).clone(true)[0];
});
$('#pai').html(novosElementos);

jsFiddle: link

    
09.01.2015 / 17:26
4

As the question includes the tag , I leave here a

// Seleciona as divs que queremos ordenar
var divs = document.querySelectorAll('#pai .produtos');

// Converte a NodeList de divs para array
// https://developer.mozilla.org/en/docs/Web/API/NodeList#How_can_I_convert_NodeList_to_Array.3F
var ordem = [].map.call(divs, function(element) {
    return element;
});

// Ordena a array pelo atributo 'contagem'
ordem.sort(function(a,b) {
    var ca = parseInt(a.getAttribute('contagem'), 10);
    var cb = parseInt(b.getAttribute('contagem'), 10);
    return cb - ca;
});

// Reinsere os filhos no pai, resultando na ordem desejada
var container = document.querySelector('#pai');
for(var i=0; i<ordem.length; i++) {
    container.appendChild(ordem[i]);   
}
<div id="pai">
    <div class="produtos" contagem="2">2</div>
    <div class="produtos" contagem="1">1</div>
    <div class="produtos" contagem="3">3</div>
</div>
    
09.01.2015 / 18:36
3

You can do the following:

  • Get all values from the divs count attribute;
  • Order the array;
  • Adjust the order on the screen.

The script looks like this:

var $pai = $("#pai");
var arrProdutos = [];

$("div[contagem]", $pai).each(function() {
    arrProdutos.push( parseInt($(this).attr("contagem")) );
});

arrProdutos.sort();
for (var i = 0; i < arrProdutos.length; i++) {
    $pai.append($("div[contagem='" + arrProdutos[i] + "']", $pai));
}

JSFiddle

    
09.01.2015 / 17:24