Das ist von James Padolsey. Schau dir seinen Artikel an, um auch eine reine JavaScript-Technik zu finden.
Plugin
(function($){
$.fn.shuffle = function() {
var allElems = this.get(),
getRandom = function(max) {
return Math.floor(Math.random() * max);
},
shuffled = $.map(allElems, function(){
var random = getRandom(allElems.length),
randEl = $(allElems[random]).clone(true)[0];
allElems.splice(random, 1);
return randEl;
});
this.each(function(i){
$(this).replaceWith($(shuffled[i]));
});
return $(shuffled);
};
})(jQuery);Verwendung
Zielelemente auswählen, shuffle aufrufen.
$('ul#list li').shuffle();
Vielen Dank für diesen Beitrag – er ist nützlich. Ich werde mir noch einmal die jQuery-Dokumentation zu map, get und replaceWith sowie zum nativen JS-splice ansehen.
Ihr Webdesign ist großartig. Ich liebe es. Herzlichen Glückwunsch!
Alex
Toller Beitrag. Vielen Dank.
Tolles Plugin. Vielen Dank.
Hat jemand eine Idee, wie das funktionieren könnte, wenn man z.B. zwei verschiedene Listen auf derselben Seite zufällig anordnen möchte? Ja, ich könnte jeder Liste eine andere ID zuweisen und sie dann so mischen:
$(‘ul#list1 li’).shuffle();
$(‘ul#list2 li’).shuffle();
Aber ich würde gerne einfach folgendes tun können:
$(‘ul.randlist li’).shuffle();
Und das würde dann nur die Listenelemente innerhalb dieser UL zufällig anordnen, selbst wenn ich mehrere Listen auf einer Seite hätte. Im Moment mischt es alle Listenelemente über ALLE **ul** mit dieser Klasse. Das ist nicht, was ich will, da die Listenelemente bei ihrem Elternteil bleiben müssen.
Trevor, das ist einfach mit
each()$('ul.randlist').each(function(){$(this).find('li').shuffle()
})
Außerdem habe ich bemerkt, dass dieses Plugin Referenzen zu den ursprünglichen Elementen bricht (da es sie tatsächlich kopiert). Ich habe eine Version geschrieben, die die ursprünglichen Elemente tatsächlich mischt.
“`
(function($){
})(jQuery)
“`
Ausgezeichneter Tipp! Ich möchte nur hinzufügen, dass Sie, wenn Sie verschachtelte Listenelemente (ul ul li) innerhalb Ihrer übergeordneten ul#list haben, diesen Code zur Initialisierung verwenden sollten, um nur die übergeordneten Listenelemente zu mischen:
Danke Jesse! Wow, das war eine einfache Lösung, ich muss jQuery wirklich besser lernen. Und gute Arbeit mit Ihrer aktualisierten Shuffle-Funktion!
Ich habe mich nur gefragt, was genau Sie mit der Funktion meinten, die „Referenzen auf die ursprünglichen Elemente bricht“?
Lizenz?
also vielleicht passt dieser hier https://css-tricks.de/license/ … Ich werde jetzt befördert :D
Was ist die Mindestanzahl der erforderlichen Elemente?
Schöne Lösung :)
Ich habe eine kleine Änderung vorgenommen, um ein Plugin zu erstellen, das zufällig Elemente entfernt
(function($) {
$.fn.randomRemove = function(n) {
var allElems = this.get(),
getRandom = function(max) {
return Math.floor(Math.random() * max);
};
if (allElems.length > n) {
while (n > 0) {
var random = getRandom(allElems.length);
$(allElems[random]).remove();
allElems.splice(random, 1);
n–;
}
}
return $(allElems);
};
})(jQuery);
Oder probieren Sie einfach das hier
Schön ^
Gut gemacht @jess. Hat sehr geholfen, die anderen Optionen brachen die Referenzen und damit meine App!
Nochmals vielen Dank!
Vielen Dank! Hat mir sehr geholfen!
funktioniert wie am Schnürchen. Danke!
Wow, das ist ein wunderbares Skript, danke fürs Teilen!
Gibt es eine Möglichkeit, das Mischen erst nach n Beiträgen anzuwenden?
Vielen Dank nochmals
@Giovanni: Ich würde sagen
if (posts > n) {
$(‘#elements’).shuffle();
}
Ist es möglich, das alles zu animieren?
Kennt jemand eine ES6/Typescript, nicht-jQuery-Version davon? Die „native JS“-Version wirft Fehler, wenn ich versuche, sie in meine Angular-App einzufügen, die Syntax ist völlig falsch.
Hallo, ich wollte nur fragen, was passiert, wenn wir dieser Funktion ein setInterval hinzufügen wollen, wie kann ich es jedes Mal wiederholen, danke
Gibt es eine Vanilla-Version?
Lassen Sie es gut sein, ich mache das bereits, hoffe, es hilft Ihnen
https://gist.github.com/marcomarkkez/53331159aab7521e66df3f5efbae3208