我有一个这样的菜单:
<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()
但任何其他实现此目的的方法都是值得赞赏的。
最佳答案
其实并没有那么难。 JQuery 几乎可以通过 insertBefore 和 insertAfter 方法自行将您带到那里。
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();
关于javascript - 我可以使用 jQuery 轻松地向上或向下移动 li 元素吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1485138/