Question

我有一个拖放设计，当你重新排列可拖动的项目时，将它们的ID推送到一个数组。所以我会有一个像：

这样的数组

["#fake-block_1","#fake-block_3","#fake-block_2"]

在幕后，我想重新排列与这些块共享相同数值的一些相应div，例如#fake-block_1映射到#real-block_1。我似乎无法理解如何让这种重新安排发生。这是我目前拥有的：

$('.js-fake-block’).each(function(i){

  $this = $(this);
  $array = new Array();
  $delimiter = '_';

  $array.push($this.attr("id").split($delimiter)[1]);
  $array.forEach(function(item,index){
    $realBlockId = "#real-block_”+[item];
  });
});

所以我循环遍历每个“假块”，用下划线分割它们的ID（我用相同的数值匹配假和真实），将它们添加到一个数组中，然后让真实的ID再次组成......但之后我迷路了。不知道我是如何根据这个＆＃34;假块＆＃34;来排序“真正的块”。数组顺序。

Answer 1

一种解决方案是使用sort方法来描述如何排序元素，然后重新设置父级的html：

var sortedDivs = $divs.sort(function (a, b) {
    // If referring to your array of IDs, you can use indexOf($(a).attr("id"))
    return $(a).attr("id") > $(b).attr("id");
});

$("#container").html(sortedDivs);

JsFiddle

Answer 2

我不知道为什么你需要在数组中保存数字并再次循环以创建一个新数组..你可以使用下一个代码

$array = [];  // use array outside the loop 
$('.js-fake-block').each(function(i){
  var $this = $(this);
  var $delimiter = '_';
  var SplitNum = $this.attr("id").split($delimiter);
  $array.push("#real-block_" + SplitNum[1]);
});
console.log($array);

工作示例

＆＃13;

$array = [];  // use array outside the loop 
$('.js-fake-block').each(function(i){
  var $this = $(this);
  var $delimiter = '_';
  var SplitNum = $this.attr("id").split($delimiter);
  $array.push("#real-block_" + SplitNum[1]);
});
console.log($array);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="js-fake-block" id="fake-block_1"></div>
<div class="js-fake-block" id="fake-block_3"></div>
<div class="js-fake-block" id="fake-block_5"></div>
<div class="js-fake-block" id="fake-block_4"></div>
<div class="js-fake-block" id="fake-block_2"></div>

＆＃13;

Answer 3

以下是您尝试做JSFiddle

的简单示例

function sortDom(selectorArray) {
    while (selectorArray.length) {
        let $el = $(selectorArray.pop());
        $el.parent().prepend($el);
    }
}

//Usage//
$('.ordinal').on('click', function() {
    sortDom(['#_01', '#_02', '#_03', '#_04', '#_05', '#_06', '#_07', '#_08', '#_09', '#_10']);
});
$('.reversed').on('click', function() {
    sortDom(['#_10', '#_09', '#_08', '#_07', '#_06', '#_05', '#_04', '#_03', '#_02', '#_01']);
});
$('.jumbled').on('click', function() {
    sortDom(['#_07', '#_01', '#_10', '#_04', '#_02', '#_03', '#_06', '#_05', '#_09', '#_08']);
});

请注意，此方法不会强制附加到同一父级的数组元素引用dom元素，并且不强制必须在数组中引用父级的所有子元素。未引用的子元素将被推送到列表的底部。

根据数组顺序对div进行排序

3 个答案: