重新排序列表元素 - jQuery? [复制]
Posted
技术标签:
【中文标题】重新排序列表元素 - jQuery? [复制]【英文标题】:reorder list elements - jQuery? [duplicate] 【发布时间】:2011-03-04 07:27:21 【问题描述】:是否可以使用 javascript 或纯 jQuery 重新排序 <li>
元素。所以如果我有一个像下面这样的愚蠢列表:
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Cheese</li>
</ul>
如何移动列表元素?就像将带有Cheese
的列表元素放在带有Foo
的列表元素之前,或者将Foo
移动到Bar
之后。
有可能吗?如果有,怎么做?
【问题讨论】:
【参考方案1】: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
);
【讨论】:
我无法让它工作.. 有人可以在 jsfiddle 演示这个吗? 对我来说很好。这是 jsfiddle 示例:jsfiddle.net/Afbrt 漂亮的解决方案。正是我需要的。谢谢你好先生在这个美好的星期五下午没有思考 直到关于detach()
。谢谢!
我完全不明白为什么需要detach
?【参考方案2】:
如果有人希望通过将元素一次向上/向下移动某个列表来重新排序元素...
//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);
【讨论】:
这就是我喜欢***的原因。谢谢@alexg【参考方案3】:关于 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
,以便将任何未选择的元素推到末尾。
【讨论】:
这正是我正在寻找的 - 感谢分享@SandyGifford 效果很好。谢谢。非常紧凑的解决方案。【参考方案4】:这里有一个 jQuery 插件来帮助实现这个功能:http://tinysort.sjeiti.com/
【讨论】:
好用又简单的插件【参考方案5】:这样的?
var li = $('ul li').map(function()
return this;
).get();
$('ul').html(li.sort());
demo
我有点迷茫,你可能想要这样的东西......
$('ul#list li:first').appendTo('ul#list'); // make the first to be last...
$('ul#list li:first').after('ul#list li:eq(1)'); // make first as 2nd...
$('ul#list li:contains(Foo)').appendTo('ul#list'); // make the li that has Foo to be last...
更多 here1 和 here2
【讨论】:
这条线似乎不起作用$('ul#list li:first').after('ul#list li:eq(1)');
【参考方案6】:
看看jquery ui sortable
http://jqueryui.com/demos/sortable/
【讨论】:
虽然很酷,但我不需要用户能够使用,我只是想知道我是否可以使用 jQuery 或仅使用 javascript 以编程方式完成它。 啊,我明白了!从你的问题中并没有真正明白这一点以上是关于重新排序列表元素 - jQuery? [复制]的主要内容,如果未能解决你的问题,请参考以下文章