Sortare alfabetica sau numerica FIXED
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>B</h1>
<h2>2014.02.22</h2>
</div>
<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(),
alphaDir = 1,
numDir = 1;
$('#alphBnt').on('click', function () {
var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
return alphaDir * ($(a).find("h1").text() > $(b).find("h1").text() ? 1 : -1);
})
$("#container").html(alphabeticallyOrderedDivs);
alphaDir = -alphaDir
$(this).text( numDir == 1 ? "Alfabetic" :"Aleator" )
});
$('#numBnt').on('click', function () {
var numericallyOrderedDivs = $divs.sort(function (a, b) {
return numDir * ($(a).find("h2").text() < $(b).find("h2").text() ? 1 : -1);
});
$("#container").html(numericallyOrderedDivs);
numDir = -numDir
$(this).text( numDir == 1 ? "Cele mai recente" :"Cele mai vechi" )
});