Question

让我们说我有一些div，就像这样...

<div id="topDiv"></div>
<div id="A"></div>
<div id="B"></div>
<div id="C"></div>
<div id="D"></div>

点击按钮，我想调用一个按照特定顺序排列这些div的功能，使用＆＃34; topDiv＆＃34;永远呆在顶端。传递给函数的参数指定了div应该排列的顺序......

$(document).ready(function(){
    $("button").click(function(){
        reorderListItems("#C, #A, #D, #B");
    });
}); 


function reorderListItems(items) {
    $(items).insertAfter("#topDiv"); 
}

因此，当调用此函数时，我希望div按此顺序出现 - ＆gt; topDiv，C，A，D，B。

我意识到我不能使用＆＃34;项目＆＃34;这种方式用于＆＃34; insertAfter＆＃34;选择。那么有人会知道我需要改变什么来使这项工作？或者可能有不同的（更好的）方法来实现这一目标？

谢谢！

Answer 1

FIDDLE：http://jsfiddle.net/KUWUd/

这样可行：

function reorderListItems(items) {

 //split() returns an array
  var itemArray = items.split(","); //split the original item string into individual strings
  var target = $('#topDiv'); //original target
  for (var i=0; i<itemArray.length; i++) {
   var item = itemArray[i];  
   $(item).insertAfter(target); //select each ID and insert
   target = $(item); //update target
  }
}

您将原始字符串传递给reOrderListItems()函数，并将该参数用作$的选择器参数。那不行。字符串参数需要拆分为组成字符，并将这些字符用作$的参数。

Answer 2

这是一个简单的方法，你有正确的想法。只需使sort函数做你想做的事。

JSFiddle

var sortOrder = ["C", "A", "D", "B"];
$('button').click(function () {
    //Select all divs following #topDiv
    var sorted = $('#topDiv ~ div').get().sort(reorderListItems)
    $(sorted).insertAfter('#topDiv');
});

function reorderListItems(a, b) {
    return sortOrder.indexOf(a.id) > sortOrder.indexOf(b.id)
}

sortOrder需要包含div的确切ID才能使其正常工作。

以特定顺序动态重新排列元素？

2 个答案: