Wie kann ich die Absätze eines Box-Absatzes in zufälliger Reihenfolge anzeigen?
Normalerweise werden die Absätze in einem Box-Absatz einfach der Reihe nach angezeigt: bei einspaltiger Anzeige untereinander, bei zwei bis vier Spalten jeweils zeilenweise nebeneinander. Mit wenigen Zeilen Javascript-Code können Sie die in einem Box-Absatz enthaltenen Absätze schwuppdiwupp zufällig anzeigen.
Beispiel-Seite zum Downaload
Laden Sie die Datei Box-Absatz_Shuffler.wle herunter und importieren Sie diese in Ihr Projekt. Diese enthält neben dem Skript auch Beispiel-Box-Absätze, mit denen Sie experimentieren können.
Schritt 1: Die Klasse .shuffle zuweisen
Weisen Sie dem oder den Box-Absätzen, deren Inhalt in zufälliger Reihenfolge angezeigt werden sollen, die CSS-Klasse .shuffle zu. Wie das geht, erfahren Sie im Eigene CSS-Klassen für Absätze verwenden.
Sie können diese Klasse einem oder mehreren Box-Absätzen zuweisen. Das Javascript findet alle Absätze mit dieser Klasse. Achten Sie darauf, dass Sie die Klasse nur Box-Absätzen zuweisen, denn das Skript funktioniert nur mit Box-Absätzen korrekt.
Sie können diese Klasse einem oder mehreren Box-Absätzen zuweisen. Das Javascript findet alle Absätze mit dieser Klasse. Achten Sie darauf, dass Sie die Klasse nur Box-Absätzen zuweisen, denn das Skript funktioniert nur mit Box-Absätzen korrekt.
Schritt 2: Einfügen eines HTML-Absatz
Legen Sie nun einen neuen HTML-Absatz an. In ihm hinterlegen wir den Javascript-Code für das zufällige Mischen der Absätze. Kopieren Sie hierzu den nachstehenden Code in die Zwischenablage und fügen Sie ihn im HTML-Absatz ein - fertig!
<script type="text/javascript">
function arrayShuffle(arr) {
for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
return arr;
}
function shuffle(container) {
var shuffled = arrayShuffle(container.children());
container.empty();
shuffled.appendTo(container);
}
$(document).ready(function(){
var targets = $('.shuffle');
targets.each(function() {
var div = $(this);
div.children('.box-row-2, .box-row-3, .box-row-4').each(function() {
var row = $(this);
shuffle(row);
});
shuffle(div);
});
});
</script>
function arrayShuffle(arr) {
for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
return arr;
}
function shuffle(container) {
var shuffled = arrayShuffle(container.children());
container.empty();
shuffled.appendTo(container);
}
$(document).ready(function(){
var targets = $('.shuffle');
targets.each(function() {
var div = $(this);
div.children('.box-row-2, .box-row-3, .box-row-4').each(function() {
var row = $(this);
shuffle(row);
});
shuffle(div);
});
});
</script>
Wie das Skript arbeitet
Box-Absätze auswählen und Inhalt mischen
In der ready()-Funktion werden alle Box-Absätze mit der Klasse .shuffle selektiert und verarbeitet: Per jQuery-Selektor besorgen wir uns hierzu alle Div-Element, die die Klasse .shuffle zugewiesen haben:
Dann iterieren wir über alle diese Elemente mittels der each()-Funktion, um den Inhalt zu mischen. Für mehrspaltige Box-Absätze müssen wir hierbei die Absätze der einzelnen Zeilen sortieren und dann die einzelnen Zeilen, für einspaltige Box-Absätze reicht es die Zeilen zu sortieren:
Die Funktion shuffle()
Die Funktion arrayShuffle() mischt die Elemente des übergebenen Arrays zufällig. Die Funktion shuffle() nutzt diese Funktion, um den Inhalt (die sog. Kinder, engl. children) des übergebenen Container-Objekts zufällig zu mischen: