JQuery tinysort arbeiten nicht

Question

Ich erwäge tinysort zu verwenden, um eine komplexe div Liste zu sortieren und hier zuerst html wird versuchen

<div id = "sort"> 
    <div id = "volume"> 
     <div id ="section1">S5 
      <div>S5-2</div> 
      <div>S5-1</div> 
     </div> 
     <div id="section2">S2</div> 
     <div id="section3">S3</div> 
    </div> 
</div> 
<script> 
    $(document).ready(function() { 
     tinysort('div#volume>div'); 
     tinysort('div#section1>div'); 
    }); 
</script> 

Ich wünsche, dass es

S2 
S3 
S5 
S5-1 
S5-2 

sein wird, aber es ist

S5 
S5-2 
S5-1 
S2 
S3 

Answer 1

Stellen Sie sicher, dass Sie jquery in Ihrem Code enthalten haben, einschließlich tinysort.defaults.ignoreDashes = true;. Siehe das Codestück unter

$(document).ready(function() { 
 
    \t tinysort.defaults.ignoreDashes = true; 
 
     tinysort('div#volume>div'); 
 
     tinysort('div#section1>div'); 
 
    });

<div id = "sort"> 
 
    <div id = "volume"> 
 
     <div id ="section1">S5 
 
      <div>S5-2</div> 
 
      <div>S5-1</div> 
 
     </div> 
 
     <div id="section2">S2</div> 
 
     <div id="section3">S3</div> 
 
    </div> 
 
</div> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.3.6/tinysort.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

Sie können Ihre eigene Sortierfunktion verwenden:

function mySort(a, b) { 
 
    return $(a.elm).text() < $(b.elm).text() ? -1 : 1; 
 
} 
 
$(document).ready(function() { 
 
    tinysort('div#volume>div', {sortFunction: mySort }); 
 
    tinysort('div#section1>div', {sortFunction: mySort }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.3.6/tinysort.min.js"></script> 
 
<div id="sort"> 
 
    <div id="volume"> 
 
     <div id="section1">S5 
 
      <div>S5-2</div> 
 
      <div>S5-1</div> 
 
     </div> 
 
     <div id="section2">S2</div> 
 
     <div id="section3">S3</div> 
 
    </div> 
 
</div>