[jQuery - sort divs - by 'data-' attribute] #jQuery #javascript #sort_divs

sort_divs.css

div[data-percentage] {
    font-family: sans-serif;
    background: teal;
    padding: 10px;
    font-weight: bold;
    color: #023636;
    text-shadow: 0 1px 0 #58BBBB;
    font-size: 20px;
    width: 100px;
    margin: 4px auto;
    text-align: center;
}

div[data-percentage]:before {
    content: attr(data-percentage);
}

sort_divs.html

<div class="testWrapper">
    <div class="test" data-percentage="30"></div>
    <div class="test" data-percentage="62"></div>
    <div class="test" data-percentage="11"></div>
    <div class="test" data-percentage="43"></div>
</div>

sort_divs.js

var $wrapper = $('.testWrapper');

$wrapper.find('.test').sort(function (a, b) {
    return +a.dataset.percentage - +b.dataset.percentage;
})
.appendTo( $wrapper );

sort_divs.md

sort_divs_ex02.html

<div id="list">
    <div class="listing-item" data-listing-price="2">2</div>
    <div class="listing-item" data-listing-price="3">3</div>
    <div class="listing-item" data-listing-price="1">1</div>
    <div class="listing-item" data-listing-price="4">4</div>
</div>

sort_divs_ex02.js

var divList = $(".listing-item");
divList.sort(function(a, b){ return $(a).data("listing-price")-$(b).data("listing-price")});

$("#list").html(divList);

sort_divs_ex02.md

sort_divs_ex03.css

li:before {content: attr(data-time) ": "; color: #aaa;} 

sort_divs_ex03.html

<ul>
    <li data-time="5">One</li>
    <li data-time="523">Two</li>
    <li data-time="12">Three</li>
    <li data-time="3">Four</li>
    <li data-time="2">Five</li>
    <li data-time="12">Six</li>
    <li data-time="1">Seven</li>
    <li data-time="678">Eight</li>
</ul>

sort_divs_ex03.js

var items = $('li');
items.sort(function(a, b){
    return +$(a).data('time') - +$(b).data('time');
});
    
items.appendTo('ul');

sort_divs_ex03.md