使用jQuery动态安排div

我有以下结构：

现在someid实际上是该div的唯一ID。 现在我收到一个有不同顺序的数组，比如说3,2,1,4，然后我如何使用jQuery移动这些div来匹配新的顺序？

非常感谢您的宝贵时间。

Answer 1

我的插件版本 – Working Demo

获取数组和可选的id前缀并重新排序其id与数组内的（id前缀）+值的顺序相对应的元素。 数组中没有具有相应id的元素的任何值都将被忽略，并且将删除在该数组中没有id的所有子元素。

 (function($) { $.fn.reOrder = function(array, prefix) { return this.each(function() { prefix = prefix || ""; if (array) { for(var i=0; i < array.length; i++) array[i] = $('#' + prefix + array[i]); $(this).empty(); for(var i=0; i < array.length; i++) $(this).append(array[i]); } }); } })(jQuery); 

演示代码

jQuery的

  $(function() { $('#go').click(function() { var order = $('#order').val() == ""? null: $('#order').val().split(","); $('#container').reOrder(order, 'someid'); }); }); (function($) { $.fn.reOrder = function(array, prefix) { return this.each(function() { prefix = prefix || ""; if (array) { for(var i=0; i < array.length; i++) array[i] = $('#' + prefix + array[i]); $(this).empty(); for(var i=0; i < array.length; i++) $(this).append(array[i]); } }); } })(jQuery); 

HTML

          
 
div1
 
div2
 
div3
 
div4
 
 
Pass in a comma separated list of numbers 1-4 to reorder divs
     

Answer 2

这是一个没有jQuery的解决方案：

 function appendNodesById(parent, ids) { for(var i = 0, len = ids.length; i < len; ++i) parent.appendChild(document.getElementById(ids[i])); } appendNodesById(document.getElementById('container'), ['someid4', 'someid2', 'someid3', 'someid1']); 

Answer 3

[编辑]，这是经过测试和运作的：

 var order = [3,2,1,4]; var container = $("#container"); var children = container.children(); container.empty(); for (var i = 0; i < order.length; i++){ container.append(children[order[i]-1]) } 

i-1是必需的，因为您的排序从1开始，但数组从0开始索引。

感谢JP和Russ Cam让我再次看到它。

Answer 4

如果您拥有数组中的所有内容，则从代码中的包装器div 容器中删除所有内容。 然后开始逐个添加收到的div：

  var v = $(ar[0]).append(ar[1]).append(ar[2]); $("#container").html(v); 

如果这不起作用，那么请查看这个讨论定位元素相对于其他元素的线程 。