JSFiddle - React, Tailwind, and code Playground

by dfsq

HTML

<input type="button" id="dwButton" value="Get new data-weights">
<input type="button" id="sortButton" value="Sort by data-weights">
<div id="wrapper">
    <div class="article fix" data-weight="1">
        <img src="http://lorempixel.com/100/100/food/1" /> <span class="dw"></span>
    </div>
    <div class="article">
        <img src="http://lorempixel.com/100/100/food/2" /> <span class="dw"></span>

    </div>
    <div class="article">
        <img src="http://lorempixel.com/100/100/food/3"> <span class="dw"></span>

    </div>
    <div class="article">
        <img src="http://lorempixel.com/100/100/food/4"> <span class="dw"></span>

    </div>
    <div class="article" data-weight="0.0001">
        <img src="http://lorempixel.com/100/100/food/5"> <span class="dw"></span>

    </div>
</div>

CSS

div {
    padding-top:20px;
}
.article {
    width:100px;
}
.article img {
    width:100%;
    height:auto;
}

JavaScript

//assign new data-weights for later sorting
$("#dwButton").on("click", function () {
    var rand = 0;
    $('#wrapper .article').each(function () {
        rand = Math.random();
        $(this).data('weight', rand);
        $(this).children('.dw').html(rand);
    });
});

$("#sortButton").on("click", function () {
    
    var $wrapper = $('#wrapper'),
        $art = $wrapper.children('.article');
    
    $art.sort(function(a, b) {
        return +$(a).data('weight') - +$(b).data('weight');
    })
    .each(function() {
        $wrapper.append(this);
    });
});