Sorting 如何在Scala.js中按属性值对子节点排序？

问题是根据根节点的top-CSS属性对所有子div进行排序

这是我的密码：

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)
}

我是Scala.js的新手，花了不少功夫才想出这个解决方案。它可以编译并且似乎有效，但是我不确定它是否合法

---

例如，我只能以非常复杂的方式获取节点的top属性。我还怀疑，删除所有子节点global.document.getElementByIdroot.innerHTML=是一种后门方式。我不确定这种排序是否可以在不创建克隆的情况下进行。我欢迎任何改进建议，我希望一些初学者甚至会发现这段代码很有用。

各种建议，有些与Scala有关，有些与底层浏览器环境有关：

首先，jQuery是您的朋友。尝试使用原始DOM做任何事情都是件麻烦事，除了最简单的玩具应用程序之外，我不推荐使用它。记住，这与Scala.js无关——这只是在浏览器中工作的现实，JavaScript也是如此

使用jQuery，获取元素只需：

val elements = $("root").children

第二，基本上没有人在Scala中使用这样的索引进行循环——这是合法的，但极为罕见。相反，您可以直接在for中获取每个元素。您可以将值赋值直接粘贴到for本身中，保持yield子句干净

jQuery允许您直接获取CSS属性。尽管我认为你仍然需要解析出px。同样，如果您尝试使用原始DOM函数，那么一切都会变得更加困难

而且很难拼出Tuple2——你只需要用parens来表示一个tuple。把所有这些放在一起，看起来像这样：

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

---

请记住，我实际上还没有尝试过上面的代码-可能有一些bug-但这更像是惯用的Scala.js+jQuery代码的样子，值得考虑作为一个起点。

感谢这些建议。事实上，我知道Scala.js.有一个jQuery扩展，但是我无法导入这个扩展：，我得到了关于绑定的各种神秘错误消息。D3.js扩展很容易导入，可以作为charm使用，目前我将其用于选择。对于如何导入jQuery，我将不胜感激。完整的工作示例可能是。更复杂的是，我使用的是一个集成项目，其中客户端和服务器+共享代码一起编译：。嗯，使用vmunier的库是非常标准的-我自己使用它。我建议使用上面链接的较新的jquery facade，而不是较旧的scala js jquery。但我不知道捆绑包错误是从哪里来的——这有点奇怪。我很快就要出发了，但我建议在scala.js社区的核心scala js/scala js Gitter频道上讨论这个问题，并发布您看到的错误-那里的人可能会提供帮助。此外，如果不明显，请记住它不是任何类型的jQuery扩展，它只是一个门面。在编写Scala.js代码之前，仍然需要包含jQuery本身。不管您使用Scala js jquery还是jquery facade，Scala.js facade都会告诉Scala代码如何使用jquery。