Wie kann ich Kindknoten nach Eigenschaftswert in Scala.js sortieren?

Question

Das Problem ist, alle untergeordneten div-Tags von einem Wurzelknoten zu sortieren nach ihrer top CSS-Eigenschaft.

Hier ist mein Code:

val elements = global.document.getElementById("root").childNodes.asInstanceOf[dom.NodeList] 

val clones = (for (i <- (0 to (elements.length - 1)) if (elements(i).isInstanceOf[dom.raw.HTMLDivElement])) yield { 
    val clone = elements(i).cloneNode(true) 
    val style = clone.attributes.getNamedItem("style").value 
    val parts = style.split("top: ") 
    val parts2 = parts(1).split("px") 
    val px = parts2(0).toDouble 
    Tuple2[dom.Node, Double](clone, px) 
}).toList 

val sorted = clones.sortWith((a, b) => a._2 > b._2) 

global.document.getElementById("root").innerHTML = "" 

for (e <- sorted) { 
    global.document.getElementById("root").appendChild(e._1) 
} 

Ich bin neu in Scala.js und es dauerte ziemlich Mühe mit dieser Lösung zu kommen. Es kompiliert und scheint zu funktionieren, aber ich bin mir nicht sicher, wie legitim es ist.

Zum Beispiel kann ich nur bekommen die top Eigenschaft des Knotens in einer sehr komplizierten Art und Weise. Auch vermute ich, dass zum Löschen aller Kindknoten global.document.getElementById("root").innerHTML = "" eine Hintertür ist. Ich bin nicht sicher, ob diese Sortierung an Ort und Stelle erfolgen kann, ohne Klone zu erzeugen. Ich freue mich über Verbesserungsvorschläge und hoffe, dass einige Anfänger diesen Code auch nützlich finden.

Answer 1

verschiedene Vorschläge, einige im Zusammenhang mit Scala und einige der zugrunde liegenden Browser-Umgebung:

Zuerst jQuery (actual JavaScript library) (Scala.js facade) ist dein Freund. Der Versuch, irgendetwas mit dem rohen DOM zu tun, ist ein Schmerz in den Arsch, und ich empfehle es für nichts als die einfachsten Spielzeuganwendungen. (Das hat nichts mit Scala.js zu tun, Geist - das ist nur die Realität im Browser zu arbeiten, und ist alles wahr von JavaScript als auch.)

Mit jQuery, ist es, die Elemente immer nur:

val elements = $("root").children 

Zweitens Schleifen im wesentlichen niemand Indizes in Scala wie das mit - es ist legal, aber extrem selten. Stattdessen erhalten Sie jedes Element direkt in der for. Und Sie können die Wertzuweisungen in das für sich selbst halten, die Klausel yield sauber halten.

jQuery können Sie direkt bei CSS-Eigenschaften erhalten. (Obwohl ich glaube, Sie noch haben, um die „px“ parsen.) Auch hier ist alles viel schwieriger, wenn Sie versuchen, die Roh-DOM-Funktionen zu verwenden.

Und es ist sehr selten Tuple2 zu buchstabieren - man muss nur Pars für ein Tupel verwenden. Dass sie alle zusammen, es etwas würde wie folgt aussehen:

for { 
    element <- elements 
    if (element.isInstanceOf[dom.raw.HTMLDivElement]) 
    clone = element.clone() 
    top = clone.css("top") 
    px = top.dropRight(2).toDouble 
} 
    yield (clone, px) 

Geist, haben versucht, ich nicht wirklich den obigen Code aus - es gibt wahrscheinlich einige Fehler - aber das ist eher wie was idiomatische Scala. js + jQuery Code würde aussehen, und ist als Ausgangspunkt zu betrachten.