Randomize Liste HTML: Afficher la liste HTML Articles Aléatoirement

Apprenez à randomiser liste HTML avec le code JavaScript. La liste pourrait soit être commandé (OL) ou unordered (UL). Méthode utilise la fonction rand pour mélanger des éléments LI

A+ A-

J'ai eu une longue liste d'URL que je voulais afficher sur une page Web. Aussi, je voulais que ces URL à toujours venir dans un ordre aléatoire. Donc, il me fallait un moyen de saisir la liste de HTML et mélangez ensuite tous les éléments qu'il contient. Dans un premier temps, j'étais un peu à perte, mais il est avéré être une chose très facile!

J'ai trouvé un () fonction randomizeList JavaScript.

Le code JavaScript suivant peut randomiser une liste HTML. Le script peut gérer à la fois la liste ordonnée (OL) et Liste Unordered (UL) car il fonctionne sur les éléments LI qui sont communs aux deux types de liste.

Si vous souhaitez afficher au hasard des éléments dans une liste HTML chaque fois que la page se charge que vous pouvez appelle la fonction randomizeList () lorsque l'événement onLoad de la balise BODY se produit. Et si vous voulez donner le contrôle à l'utilisateur, par exemple , vous voulez randomize liste clic d'un bouton, vous pouvez appeler la même fonction lorsque l' événement onClick de ce bouton se produit.

JavaScript est beau!

JavaScript est beau!

Vous auriez juste besoin de passer l'identifiant de la liste que vous souhaitez randomisation. L'ID doit être défini dans la première ligne de la fonction randomizeList () donnée ci - dessous:


function randomizeItems(items)
{
    var cached = items.slice(0), temp, i = cached.length, rand;
    while(--i)
    {
        rand = Math.floor(i * Math.random());
        temp = cached[rand];
        cached[rand] = cached[i];
        cached[i] = temp;
    }
    return cached;
}
function randomizeList()
{
var list = document.getElementById("myItems");
    var nodes = list.children, i = 0;
    nodes = Array.prototype.slice.call(nodes);
    nodes = randomizeItems(nodes);
    while(i < nodes.length)
    {
        list.appendChild(nodes[i]);
        ++i;
    }
list.style.display="block";
}

Assurez - vous que vous remplacez les myItems en randomizeList function () avec l'ID de votre liste de HTML. Cette méthode met la main sur tous les nœuds sous la liste fournie. Ces noeuds sont les éléments LI. Ensuite, il utilise simplement la fonction rand () de JavaScript pour mélanger ces éléments LI et renvoyé une pile disposée au hasard. Comme vous pouvez le voir dans cet exemple, être capable de traverser le modèle objet de document (DOM) est essentiel de développer de nombreuses applications web. Bien que je ne suis pas en utilisant la méthode createTreeWalker () ici , mais il est vraiment moyen facile de parcourir l' arborescence DOM .

J'espère que cette astuce a été utile pour vous. S'il vous plaît laissez-moi savoir si vous rencontrez un problème dans ce code. Merci d'utiliser TechWelkin.