Utiliser jQuery pour trier une liste non ordonnée

L'exemple de cet article décrit comment jQuery implémente la fonction de tri des listes non ordonnées. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Le principe de l'utilisation de jQuery pour trier la liste non ordonnée est le suivant : obtenez tous les éléments de la liste non ordonnée et convertissez-les en tableau formulaire, Utilisez JavaScriptfonction pour le trier et le sortir à nouveau. Les fonctions jQuery utilisées incluent ready(), get(),

text(), each(), append() et la fonction JavaScript sort().

1. Introduction aux fonctions jQuery
(1) Fonction jQuery get() --obtenir l'ensemble des éléments correspondants
Cette fonction est un moyen rétrocompatible d'obtenir tous les éléments correspondants (différents de jQueryobject , en fait un tableau d'éléments). Sa syntaxe est la suivante :
object.get()

Remarque : Cette fonction est très utile si vous souhaitez faire fonctionner directement l'objet DOM au lieu de l'objet jQuery.

(2) fonction jQuery text() -- obtenir et définir le contenu de l'élément

Cette fonction obtient et définit le contenu textuel de l'élément correspondant. Sa syntaxe est la suivante :

object.text([val|fn])

Remarque : Les paramètres val et fn sont facultatifs. val consiste à définir la valeur du contenu textuel de l'élément ; la fonction fn(index, text) renvoie une chaîne , acceptant deux paramètres, index est la position index de l'élément dans le collection, et le texte est la valeur du texte d'origine.

(3) Fonction jQuery append() - ajouter du contenu aux éléments

Cette fonction ajoute du contenu à chaque élément correspondant. La syntaxe est la suivante :

object.append(content|fn)

Remarque : Cette opération est similaire à l'exécution de la méthode appendChild sur des éléments spécifiés et à leur ajout au document. Le paramètre content représente le contenu ajouté ; fn (index, html) renvoie une chaîne HTML à ajouter à chaque élément correspondant. Il accepte deux paramètres. Le paramètre index est la valeur d'index de l'objet dans cette collection et le paramètre html est celui-ci. La valeur HTML d'origine de l'objet.

2. Introduction aux fonctions JavaScript

Fonction JavaScript sort() - tri des éléments, utilisée pour trier les éléments d'un tableau. Sa syntaxe est la suivante :

arrayObject.sort([sortby])

Remarque : sortby est facultatif, spécifie l'ordre de tri et doit être une fonction. La valeur de retour est le tableau trié lui-même. Si cette méthode est appelée sans arguments, les éléments du tableau seront triés par ordre alphabétique. Pour être plus précis, il est trié selon l'ordre de codage des caractères. Pour y parvenir, les éléments du tableau doivent d'abord être convertis en chaînes (si nécessaire) à des fins de comparaison.

Si vous souhaitez trier selon d'autres critères, vous devez fournir une fonction de comparaison, qui compare deux valeurs et renvoie un nombre décrivant l'ordre relatif des deux valeurs. La fonction de comparaison doit avoir deux paramètres a et b, et sa valeur de retour est la suivante : si a est inférieur à b, a doit apparaître avant b dans le tableau trié, alors une valeur inférieure à 0 est renvoyée. Si a est égal à b, alors 0 est renvoyé. Si a est supérieur à b, une valeur supérieure à 0 est renvoyée.

3． Implémentation fonctionnelle

Les étapes pour implémenter la fonction de tri des éléments de liste non ordonnés sont les suivantes.

(1) Récupérez tous les éléments de la liste et chargez-les dans un tableau.

(2) Trier les objets du tableau.

(3) Repeupler le tableau trié dans la liste non ordonnée.

Tout d'abord, présentez la bibliothèque jQuery :

<script language="JavaScript" src="jquery-1.7.2.min.js"></script>

Ensuite, ajoutez le code de la fonction de tri suivant :

<script language="JavaScript" type="text/JavaScript">
 $(document).ready(function(){
  var items = $(".orderobj li").get(); //获取所有待排序li装入数组items
  items.sort(function(a,b) //调用JavaScript内置函数sort
  {
    var elementone = $(a).text();
    var elementtwo = $(b).text();
    if(elementone < elementtwo) return -1;
    if(elementone > elementtwo) return 1;
   return 0;
 });
 var ul = $(".orderobj");
 $.each(items,function(i,li)
 //通过遍历每一个数组元素，填充无序列表
 {
   ul.append(li);
 });
 });
</script>

Le code ci-dessus passe Tri par tableau et repeupler la liste non ordonnée afin que les éléments de la liste soient dans l'ordre. L'effet spécifique est comme indiqué sur la figure :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!