web-dev-qa-db-fra.com

sorte de javascript des éléments HTML

J'essaie de trier un élément li et d'obtenir un résultat sans impact Je dois le trier trois fois pour l'obtenir correctement.

où est-ce que je me suis trompé? javascript

var sort_by_name = function(a, b) {
    return a.innerHTML.toLowerCase() > b.innerHTML.toLowerCase();
}
$this = $("ol#table1");
var list = $this.children();
list.sort(sort_by_name);
console.log(list);
$this.html(list);

HTML

<ol id="table1" style="display: block; ">
   <li class="menu__run">I</li>
   <li class="menu__run">IXX</li>
   <li class="menu__run">I</li>
   <li class="menu__run">I</li>
   <li class="menu__run">I</li>
   <li class="menu__run">I</li>
   <li class="menu__run">I</li>
   <li class="menu__run">I</li> 
   <li class="menu__run">IXX</li>
   <li class="menu__run">I</li>
   <li class="menu__run">I</li>
   <li class="menu__run">I</li>
   <li class="menu__run">I</li>
   <li class="menu__run">I</li>
   <li class="menu__test">st</li>
   <li class="menu__test">st</li>
   <li class="menu__test">st</li>
</ol>

exemple de violon

javascriptjquerysorting
18
shevski

Il existe de bien meilleures façons de trier. 

  1. Vous avez besoin d'une fonction de comparaison qui renvoie les bonnes valeurs: -1, 0 et 1. 
  2. localeCompare() est une telle fonction de comparaison. 
  3. Vous pouvez simplement déplacer les éléments DOM plutôt que de régénérer le code HTML. 
  4. Vous pouvez obtenir les éléments LI directement dans le sélecteur d'origine.
  5. "#table1" est un sélecteur plus efficace que "ol#table1".

Je suggérerais ceci:

$("div#btn").click(function() {
    var sort_by_name = function(a, b) {
        return a.innerHTML.toLowerCase().localeCompare(b.innerHTML.toLowerCase());
    }

    var list = $("#table1 > li").get();
    list.sort(sort_by_name);
    for (var i = 0; i < list.length; i++) {
        list[i].parentNode.appendChild(list[i]);
    }
});​

Vous pouvez voir le travail ici: http://jsfiddle.net/jfriend00/yqd3w/

38
jfriend00

A custom compareFunction doit renvoyer -1, 0 ou 1.

function sort_by_name(a, b) {
    var sa = a.innerHTML.toLowerCase(), sb = b.innerHTML.toLowerCase();
    return sb<sa ? -1 : sb>sa ? 1 : 0;
}
8
Bergi
var sort_by_name = function(a, b) {
    return $(a).text().toLowerCase().localeCompare($(b).text().toLowerCase());
}

Vous pouvez plutôt utiliser localeCompare pour rendre les choses plus élégantes et plus pratiques. 

Voir jsfiddle http://jsfiddle.net/Qww87/11/

5
Chuck Norris

selon la documentation, il a besoin de valeurs numériques. plus intelligible:

    var sort_by_name = function(a, b) {
         if(a.innerHTML.toLowerCase() < b.innerHTML.toLowerCase()) return -1;
         if(a.innerHTML.toLowerCase() > b.innerHTML.toLowerCase()) return 1;
         return 0;
    }
0
Silviu-Marian

Utiliser mon plugin jquery Trier le contenu: 

   $('ol#table1').sortContent({asc:true})

C'est tout!

DEMO: http://jsfiddle.net/abdennour/SjWXU/

0
Abdennour TOUMI