Sortare alfabetica sau numerica
Seteaza sortarea alfabetica pentru titlul articolului si sortarea numerica pentru data.
HTML
<div class="wrap">
<button id="alphBnt">Alfabetic</button>
<button id="numBnt">Cele mai recente</button>
<div id="container">
<div class="box">
<h1>A<h1>
<h2>2014.04.20</h2>
</div>
<div class="box">
<h1>D<h1>
<h2>2014.02.16</h2>
</div>
<div class="box">
<h1>C<h1>
<h2>2014.04.24</h2>
</div>
</div>
</div>
CSS
body {
background: #eee;
font-family: sans-serif;
}
.box {
background: #339966;
height: 200px;
width: 200px;
}
.box h1 {
color: white;
font-size: 3.5em;
text-align: center;
}
.box h2 {
color: black;
font-size: 1.5em;
text-align: center;
}
#alphBnt, #numBnt{
border:1px solid;
border-color:#999999;
background:#fff;
font-family:Calibri;
font-size:16px;
color:#666666;
padding:5px 15px 5px 15px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
cursor: pointer;
}
JavaScript
var $divs = $("div.box").get();
$('#alphBnt').on('click', function () {
var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
return $(a).find("h1").text() > $(b).find("h1").text()?1:-1;
})
$("#container").html(alphabeticallyOrderedDivs);
});
$('#numBnt').on('click', function () {
var numericallyOrderedDivs = $divs.sort(function (a, b) {
return $(a).find("h2").text() < $(b).find("h2").text()?1:-1;
});
$("#container").html(numericallyOrderedDivs);
});