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

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再次组成......但在那之后我'迷路了。不知道我如何根据这个“假块”数组顺序对“真实块”进行排序。

Answer 1

这是一个简单的例子，说明你正在尝试做什么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元素，并且不强制必须在数组中引用父级的所有子元素。未引用的子元素将被推送到列表的底部。

Answer 2

一种解决方案是使用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 3

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

$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);

工作实例

$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);

<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>