How to order three Ivs according to an attribute of hers?

Question

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 change them so that the Divs with the attribute countdown of greater number to come first (in descending order).

How do I get it so that the numbers of the count I don’t know, IE, they may not be the ones I passed as an example?

Answer 1

You can extract an array from the Divs with jQuery and sort it with the method 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

Answer 2

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: http://jsfiddle.net/x78Lwomu/

Answer 3

How the question includes the tag javascript, I leave here a solution in pure JS, with the commented steps, for those who want to solve the same problem without jQuery:

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

Answer 4

You can do the following:

• Get all attribute values from Divs count;
• Sort the array;
• Adjust the order on the screen.

The script would look 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