重新排序列表元素- jQuery？
重新排序列表元素- jQuery？
提问于 2010-06-16 13:03:04
是否可以使用JavaScript或纯jQuery对<li>元素进行重新排序。因此，如果我有一个愚蠢的列表，如下所示：
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Cheese</li>
</ul>我该如何移动列表元素？例如，将带有Cheese的列表元素放在带有Foo的列表元素之前，或者将Foo移到Bar之后。
有可能吗？如果是这样的话，是怎么做的？
回答 6
Stack Overflow用户
回答已采纳
发布于 2010-06-16 14:22:30
var ul = $("ul");
var li = ul.children("li");
li.detach().sort();
ul.append(li);这是一个简单的示例，其中<li>节点按某种默认顺序进行排序。我调用detach来避免删除任何与li节点相关的数据/事件。
您可以传递一个函数进行排序，也可以使用自定义比较器进行排序。
li.detach().sort(function(a, b) {
// use whatever comparison you want between DOM nodes a and b
});Stack Overflow用户
发布于 2013-11-29 18:08:09
如果有人希望通过一次一步地在列表中上下移动元素来对元素进行重新排序……
//element to move
var $el = $(selector);
//move element down one step
if ($el.not(':last-child'))
$el.next().after($el);
//move element up one step
if ($el.not(':first-child'))
$el.prev().before($el);
//move element to top
$el.parent().prepend($el);
//move element to end
$el.parent().append($el);Stack Overflow用户
发布于 2016-04-22 03:28:22
关于jQuery，我最喜欢的事情之一就是它可以如此容易地如此快速地编写微小的附加组件。
在这里，我们创建了一个小插件，它接受一组选择器，并使用它来对目标元素的子元素进行排序。
// Create the add-on
$.fn.orderChildren = function(order) {
this.each(function() {
var el = $(this);
for(var i = order.length - 1; i >= 0; i--) {
el.prepend(el.children(order[i]));
}
});
return this;
};
// Call the add-on
$(".user").orderChildren([
".phone",
".email",
".website",
".name",
".address"
]);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="user">
<li class="name">Sandy</li>
<li class="phone">(234) 567-7890</li>
<li class="address">123 Hello World Street</li>
<li class="email">someone@email.com</li>
<li class="website">https://google.com</li>
</ul>
<ul class="user">
<li class="name">Jon</li>
<li class="phone">(574) 555-8777</li>
<li class="address">123 Foobar Street</li>
<li class="email">jon@email.com</li>
<li class="website">https://apple.com</li>
</ul>
<ul class="user">
<li class="name">Sarah</li>
<li class="phone">(432) 555-5477</li>
<li class="address">123 Javascript Street</li>
<li class="email">sarah@email.com</li>
<li class="website">https://microsoft.com</li>
</ul>
该函数向后循环遍历数组，并使用.prepend，以便将任何未选中的元素推送到末尾。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3050830
复制相关文章
相似问题