Using tritium to move html elements
Question
I'm using the Moovweb SDK to make a mobile version of a website and I need to move an image from one div to another. How can I do this using tritium?
<body>
<div class="kittens">
<img src="images/husky.jpg" id="husky">
</div>
...
<div class="puppies">
[need to move img here]
</div>
</body>
2 answers
solution1
5 ACCPTED 2013-04-23 17:50:10
There are a few ways to do this.
The way I find most appealing is to use some XPath axes and the move_here command:
$("./body/div[contains(@class,'puppies')]") {
move_here("ancestor::body/div[contains(@class,'kittens')]/img[@id='huskey']")
}
This way gets the same effect using fewer characters (but is slower):
$("//div[contains(@class,'puppies')]") {
move_here("//img[@id='huskey']")
}
The reason I like doing it the first way is that, generally, the img you're looking for will not be so close to the body. Instead of doing the ancestor::body you could do //img[@id=''huskey] but this will likely be much slower. The other benefit to using ancestor is that it shows the connection between the two elements.
solution2
4 2013-04-23 17:56:09
You can either use move_to or move_here.
With move_to, it would look like this:
$("./div[contains(@class, 'kittens')]") {
move_to("../div[contains(@class, 'puppies')]")
}
Test it live: http://play.tritium.io/311b7aad88ac174899dc4c2f7ebc7407db1ea08d
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.