使用氚移动html元素答案

【问题标题】：Using tritium to move html elements使用氚移动html元素
【发布时间】：2013-04-17 01:02:29
【问题描述】：

我正在使用Moovweb SDK 制作网站的移动版本，我需要将图像从一个 div 移动到另一个。如何使用氚来做到这一点？

<body>
  <div class="kittens">
    <img src="images/husky.jpg" id="husky">
  </div>

  ...

  <div class="puppies">
    [need to move img here]
  </div>
</body>

【问题讨论】：

标签： html move moovweb tritium

【解决方案1】：

您可以使用 move_to 或 move_here。

使用 move_to，它看起来像这样：

$("./div[contains(@class, 'kittens')]") {
  move_to("../div[contains(@class, 'puppies')]")
}

现场测试：http://play.tritium.io/311b7aad88ac174899dc4c2f7ebc7407db1ea08d

【讨论】：

【解决方案2】：

有几种方法可以做到这一点。

我觉得最吸引人的方式是使用一些 XPath 轴和 move_here 命令：

$("./body/div[contains(@class,'puppies')]") {
  move_here("ancestor::body/div[contains(@class,'kittens')]/img[@id='huskey']")
}

这种方式使用更少的字符（但速度较慢）获得相同的效果：

$("//div[contains(@class,'puppies')]") {
  move_here("//img[@id='huskey']")
}

我喜欢第一种方式的原因是，一般来说，你要找的img不会离body那么近。而不是做ancestor::body 你可以做//img[@id=''huskey] 但这可能会慢得多。使用祖先的另一个好处是它显示了两个元素之间的联系。

【讨论】：