Div sorter with more than 10 items (Chrome bug)

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

It’s sorting for me in Chrome.

http://codepen.io/ryanreese09/pen/gbqYWX

It’s not sorting for me in Chrome either (even your codepen) :smile:

If you change the routine to this it works for me in Chrome:

return $(a).find("h1").text() > $(b).find("h1").text()  ? 1 : -1;

Thank you for your kind and fast reply!

It works now as suggested by PaulOB

return $(a).find("h1").text() > $(b).find("h1").text()  ? 1 : -1;

Thanks a lot!!! :smile:

D-force

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.