Is there a simple way to move an element inside its own parent?
Like this...
from:
<div class="test">hello 1</div>
<div class="test">hello 2</div>
<div class="test">hello 3</div>
to:
<div class="test">hello 1</div>
<div class="test">hello 3</div>
<div class="test">hello 2</div>
Either move a div UP or DOWN one step, or using the index to appendTo in a specific position.
You should be able to use .prev()
and .next()
like this (here as a jQuery function):
$.fn.moveUp = function() {
$.each(this, function() {
$(this).after($(this).prev());
});
};
$.fn.moveDown = function() {
$.each(this, function() {
$(this).before($(this).next());
});
};
$("div:eq(2)").moveUp(); //Would move hello 3 up
$("div:eq(0)").moveDown(); //Would move hello 1 down
Try
$("div:eq(2)").after($("div:eq(0)"));
or
$("div:eq(2)").before($("div:eq(1)"))
Remembering that :eq() is zero based.
var child = $('#parent div'); // keep reference for further use
child.eq(2).insertBefore(child.eq(1));
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.