Trier une liste à puces

Triez une liste à puce peut-être très pratique dans certaines applications.

Dans l’exemple qui va suivre, nous avons une liste de fruits, et nous voulons les trier par ordre alphabétique.

Voici le code HTML :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Liste fruits</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>

    <body>
        <div id="listeFruits">
            <ul>
                <li>abricot</li>
                <li>prune</li>
                <li>clémentine</li>
                <li>melon</li>
                <li>cerise</li>
                <li>banane</li>
                <li>raisin</li>
                <li>orange</li>
                <li>fraise</li>
            </ul>
        </div>

        <button id="tri">Triez</button>

        <script src="tri.js"></script>
    </body>
</html>

On remarque bien l’inclusion de la bibliothèque JQuery dans sa version 3.2, qui nous aidera à la mise en oeuvre de notre fonctionnalité que l’on retrouve dans le script nommé tri.js :

$(document).ready(function(){
    var fruits = [];
    $("ul li").each(function(index,elem){
        fruits.push($(this).text());
    });

    $("#tri").click(function(){
        fruits.sort();
        fruits.reverse();
        $("ul li").remove();
        $("#listeFruits").append("<ul class='fruits'> </ul>");
        for(var i = 0; i < fruits.length; i++){
            $(".fruits").wrapInner("<li>" + fruits[i] + "</li>");
        }

        $(this).fadeOut();
    });
});

Ainsi, lorsqu’on clique sur le bouton Triez, nous retrouvons notre liste triée par ordre alphabétique :

 

SMARTFUL

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *