Hello to everybody!
I am using a div sorter like this:
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var $divs = $("div.mtbtour-wrap");
$('#alphBnt').on('click', function () {
var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
return $(a).find("h1").text() > $(b).find("h1").text();
});
$("#contenitore-mtbtour").html(alphabeticallyOrderedDivs);
});
$('#diffBnt').on('click', function () {
var difficultyOrderedDivs = $divs.sort(function (a, b) {
return $(a).find("h3").text() > $(b).find("h3").text();
});
$("#contenitore-mtbtour").html(difficultyOrderedDivs);
});
$('#numBnt').on('click', function () {
var numericallyOrderedDivs = $divs.sort(function (a, b) {
return $(a).find("h2").text() > $(b).find("h2").text();
});
$("#contenitore-mtbtour").html(numericallyOrderedDivs);
});
$('#prezzoBnt').on('click', function () {
var priceOrderedDivs = $divs.sort(function (a, b) {
return $(a).find("div.prezzo").text() > $(b).find("div.prezzo").text();
});
$("#contenitore-mtbtour").html(priceOrderedDivs);
});
});//]]>
</script>
and this is the html code
<div class="contenitore-elencotour">
<a href="#" id="alphBnt">Nome percorso</a>
<a href="#" id="numBnt">Lunghezza</a>
<a href="#" id="diffBnt">Difficoltà</a>
<a href="#" id="prezzoBnt">Prezzo</a>
<div id="contenitore-mtbtour">
<div class="mtbtour-wrap">
<h1>Montaione e il suo territorio<h1>
<h3><span>1</span>Facile</h3>
<h2>24.5</h2>
<div class="prezzo">€ 17,00</div>
</div>
<div class="mtbtour-wrap">
<h1>Colline di San Gimignano<h1>
<h3><span>2</span>Medio</h3>
<h2>22.3</h2>
<div class="prezzo">€ 35,00</div>
</div>
<div class="mtbtour-wrap">
<h1>A San Gimignano e la Riserva naturale di Castelvecchio<h1>
<h3><span>2</span>Medio</h3>
<h2>27.8</h2>
<div class="prezzo">€ 35,00</div>
</div>
<div class="mtbtour-wrap">
<h1>Monteriggioni e la montagnola senese<h1>
<h3><span>3</span>Difficile</h3>
<h2>25.3</h2>
<div class="prezzo">€ 25,00</div>
</div>
<div class="mtbtour-wrap">
<h1>La Valdelsa e le colline di Castelfiorentino<h1>
<h3><span>2</span>Medio</h3>
<h2>30.3</h2>
<div class="prezzo">€ 30,00</div>
</div>
</div>
</div>
It works fine but if add more item (for a total of more than 10) the divs cannot sort anymore with Chrome.
Is there a way to solve this issue?
Thanks a lot for your help!
d-force