Javascript Girl
  1. Javascript Girl
  3. Comment trier les éléments de la liste en utilisant un ordre de tri personnalisé dans jQuery
Intereting Posts
Passer variable dans l'objet javascript En JavaScript, qu'est-ce que event.isTrigger? JSON.parse vs. eval () JS ne fonctionne pas pour la première fois charge de la page HTML Prévenir la soumission des formulaires après validation par parsley.js Événement Javascript onHover Comment produire différentes images dépend de l'écran utilisateur? Faites glisser la plage d'un curseur de plage d'entrée UI Utilisation d'une variable dans le cadre d'une propriété d'objet javascript Obtenez de la valeur à partir d'AJAX en utilisant Javascript et ASP Différence entre toJSON () et JSON.Stringify () Toujours défiler un élément div et pas la page elle-même Impossible d'obtenir des variables globales dans la fonction (javascript) Flash SWF peut-il communiquer avec l'applet Java, et vice versa, de quelque façon que ce soit? Indicateurs de progression pour l'extraction?

Comment trier les éléments de la liste en utilisant un ordre de tri personnalisé dans jQuery

Ma question est très semblable à celle d'un certain nombre d'autres que j'ai trouvé sur Stack Overflow, mais pas tout à fait pareil.

Je voudrais trier les éléments de la liste en fonction du contenu d'une portée contenue dans chaque élément, mais en utilisant un ordre de tri que je peux définir. Voici le HTML pour un élément de liste d'exemples: 

<li> <span class="fname">John</span> <span class="lname">Doe</span> <span class="year">Sophomore</span> </li>

Je veux trier en fonction du contenu de la période "année", mais chronologiquement plutôt que par ordre alphabétique. L'ordre, évidemment, doit être:

  • Étudiant de première année
  • Sophomore
  • Junior
  • Sénior

Comment puis-je faire ceci?

Juste pour référence, j'utilise le code jQuery suivant (qui fonctionne parfaitement) pour trier par ordre alphabétique par nom de famille: 

 function sortByLastName(){ var myList = $('#foo ul'); var listItems = myList.children('li').get(); listItems.sort(function(a,b){ var compA = $(a).find('.lname').text().toUpperCase(); var compB = $(b).find('.lname').text().toUpperCase(); return (compA < compB) ? -1 : (compA > compB) ? 1 : 0; }); $(myList).append(listItems); };

Pour faire correspondre votre fonction sortByLastName (), cela fonctionnerait: 

 function sortByYear(){ var myYears = ['Freshman', 'Sophomore', 'Junior', 'Senior']; var myList = $('#foo ul'); var listItems = myList.children('li').get(); listItems.sort(function(a,b){ var compA = $.inArray($(a).find('.year').text(), myYears); var compB = $.inArray($(b).find('.year').text(), myYears); return (compA < compB) ? -1 : (compA > compB) ? 1 : 0; }); $(myList).append(listItems); }

Utilisez simplement $ .inArray () pour trouver les indices de chaque année scolaire dans le tableau. Notez que cela renverra -1 pour les valeurs non trouvées dans le tableau, qui mettra ces éléments en haut de votre liste.

Une façon simple serait de créer un tableau avec vos valeurs attendues. 

 var years=['Freshman', 'Sophomore', 'Junior', 'Senior' ];

Ensuite, lorsque vous trimez vos éléments, comparez les index. 

 listItems.sort(function(a,b){ var indexA = $.inArray( $(a).find('.year').text(), years ); var indexB = $.inArray( $(b).find('.year').text(), years ); return ( indexA < indexB) ? -1 : ( indexA > indexB) ? 1 : 0; });

Vous devez modifier votre rappel de critère de tri. Comme ça: 

 function sortByLastName(){ var myList = $('#foo ul'); var listItems = myList.children('li').get(); var scores = { "FRESHMAN": 0, "SOPHOMORE": 1, "JUNIOR": 2, "SENIOR": 3 }; listItems.sort(function(a,b){ var compA = $(a).find('.lname').text().toUpperCase(); var compB = $(b).find('.lname').text().toUpperCase(); compA = scores[compA]; compB = scores[compB]; //Sort by scores instead of values return (compA < compB) ? -1 : (compA > compB) ? 1 : 0; }); $(myList).append(listItems); };

J'espère que cela t'aides