✔ UL zufällig anordnen

Hi,

dann musst du die bestehende Liste klonen, und die Anzahl ungewünschter Listenelemente daraus zufällig löschen. Anschliessend wird die Liste noch per Zufall umsortiert und ins Dokument eingehängt.

Beispiel:
Code: 
<html>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>

<ul id="ulID">
<li>#1</li>
<li>#2</li>
<li>#3</li>
<li>#4</li>
<li>#5</li>
<li>#6</li>
</ul>
<div id="debugID"></div>
<script type="text/javascript">
<!--
function rndList(intAnz){
  // Liste klonen
  var objUL = document.getElementById("ulID").cloneNode(true);
  // Listenelemente in Array schreiben
  var arrList = objUL.getElementsByTagName("li");

  // Übergebenen Wert verifizieren
  intAnz = (isNaN(intAnz) || (intAnz<=0) || (arrList.length<intAnz))? 0 : (arrList.length - intAnz);

  // Anzahl
  for(var i=0; i<intAnz; i++){
    var intRnd = Math.round(Math.random()*(objUL.getElementsByTagName("li").length-1));
    objUL.removeChild(objUL.getElementsByTagName("li")[intRnd]);
  }

  for(var i=0; i<objUL.getElementsByTagName("li").length; i++){
    var intRnd = Math.round(Math.random()*(objUL.getElementsByTagName("li").length-1));
    if(intRnd == i) continue;
    objUL.getElementsByTagName("li")[i].parentNode.insertBefore(objUL.getElementsByTagName("li")[i],objUL.getElementsByTagName("li")[intRnd]);
  }

  document.getElementById("ulID").parentNode.replaceChild(objUL, document.getElementById("ulID"));
}

rndList(2);
//-->
</script>
</body>
</html>

Der Funktion rndList wird als Argument die Anzahl der Listenelemente übergeben, die die neue Liste enthalten soll.

[EDIT]
Du kannst das auch ohne Klonen bewerkstelligen:
Code: 
function rndList(intAnz){
  // Liste
  var objUL = document.getElementById("ulID");
  // Listenelemente in Array schreiben
  var arrList = objUL.getElementsByTagName("li");

  // Übergebenen Wert verifizieren
  intAnz = (isNaN(intAnz) || (intAnz<=0) || (arrList.length<intAnz))? 0 : (arrList.length - intAnz);

  // Anzahl
  for(var i=0; i<intAnz; i++){
    var intRnd = Math.round(Math.random()*(objUL.getElementsByTagName("li").length-1));
    objUL.removeChild(objUL.getElementsByTagName("li")[intRnd]);
  }

  for(var i=0; i<objUL.getElementsByTagName("li").length; i++){
    var intRnd = Math.round(Math.random()*(objUL.getElementsByTagName("li").length-1));
    if(intRnd == i) continue;
    objUL.getElementsByTagName("li")[i].parentNode.insertBefore(objUL.getElementsByTagName("li")[i],objUL.getElementsByTagName("li")[intRnd]);
  }
}
[/EDIT]

Ciao
Quaese
 
Zuletzt bearbeitet:
Hi,
ersteinmal ein fettes Dankeschön!
Dann war das doch etwas komplexer als ich mir dachte. Die Idee die ich hatte wäre glaub ich auch nur auf Serverseite gegangen.
In dem Script ist nun noch ein kleiner Schönheitsfehler den jetzt grad versuche hinzubekommen.
Undzwar darf das Script jetzt ja auch weniger li anzuzeigen als unter rndList angegeben.
Ich hab jetzt versucht die Verifikation entsprechend anzupassen aber da zerschießt es mir jedes mal das Script bzw. die Funktion des Scriptes.

Viele Grüße
 
Hi,

ich kann dein Problem nicht nachvollziehen bzw. verstehe es eventuell auch falsch.

Bei mir läuft das Script so wie ich es gepostet habe problemlos, egal wieviele Listenelemente ich zufällig anzeigen lasse.

Vielleicht könntest du mal posten, was du genau geändert hast.

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück