我可以使用jQuery轻松地上下移动li元素吗？
我可以使用jQuery轻松地上下移动li元素吗？
提问于 2009-09-28 02:26:10
我有一个这样的菜单：
<ul id="menu" class="undecorated">
<li id="menuHome"><a href="/">Home</a> </li>
<li id="menuAbout"><a href="/Usergroup/About">About</a> </li>
<li id="menuArchives"><a href="/Usergroup/Archives">Archives</a> </li>
<li id="menuLinks"><a href="/Usergroup/Links">Links</a> </li>
</ul> 有没有一种简单的方法可以使用jquery对元素进行重新排序？我的想象是这样的：
$('#menuAbout').moveDown().moveDown()但任何其他实现这一目标的方法都是值得赞赏的。
回答 3
Stack Overflow用户
回答已采纳
发布于 2009-09-28 02:43:02
实际上，这并不难。通过insertBefore和insertAfter方法，JQuery几乎可以让您实现这一目标。
function moveUp($item) {
$before = $item.prev();
$item.insertBefore($before);
}
function moveDown($item) {
$after = $item.next();
$item.insertAfter($after);
}你可以像这样使用这些
moveDown($('#menuAbout'));并且menuAbout项将向下移动。
如果您想要扩展jQuery以包含这些方法，您可以这样编写：
$.fn.moveUp = function() {
before = $(this).prev();
$(this).insertBefore(before);
};
$.fn.moveDown = function() {
after = $(this).next();
$(this).insertAfter(after);
};现在你可以调用像这样的函数
$("#menuAbout").moveDown();Stack Overflow用户
发布于 2009-09-28 02:31:21
没有原生的原型方法，但您可以很容易地创建一个：
$.fn.moveDown = function() {
return this.each(function() {
var next = $(this).next();
if ( next.length ) {
$(next).after(this);
} else {
$(this).parent().append( this );
}
})
}
$('#menuAbout').moveDown().moveDown()这使用jQuery.prototype.after
Stack Overflow用户
发布于 2020-03-24 22:31:46
您还可以在父级上使用display: flex，然后可以使用order
function reset()
{
jQuery("#a").css("order", 10);
jQuery("#b").css("order", 20);
jQuery("#c").css("order", 30);
}
function reorder1()
{
jQuery("#a").css("order", 30);
jQuery("#b").css("order", 20);
jQuery("#c").css("order", 10);
}
function reorder2()
{
jQuery("#a").css("order", 30);
jQuery("#b").css("order", 10);
jQuery("#c").css("order", 20);
}#main { display: flex; }
#a { color: red; }
#b { color: blue; }
#c { color: green; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
<div id="a">Foo</div>
<div id="b">Bar</div>
<div id="c">Baz</div>
</div>
<button onclick="reset()">Reset</button>
<button onclick="reorder1()">Reorder 1</button>
<button onclick="reorder2()">Reorder 2</button>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1485138
复制相关文章
相似问题
腾讯云开发者
