如何获取重新排序元素的顺序

Question

我在获取 div 的顺序时遇到问题。

场景：我有这样的结构：

<div class="container">
<div class="element" id="element1">
<div class="element" id="element2">
<div class="element" id="element3">
<div class="element" id="element4">

但我正在重新排序/删除/添加与某些条件相关的一些元素 所以假设最终结构是这样的：

<div class="container">
<div class="element" id="element6">
<div class="element" id="element2">
<div class="element" id="element8">
<div class="element" id="element4">
<div class="element" id="element1">
<div class="element" id="element7">

最后我想获得最终顺序的元素列表 我正在使用

var ord= '';
for (i=1;i<=($('.element').length);i++){
  var index = $('#element'+i).index();
  ord+= index+' / ';
}

，但它给了我按创建顺序而不是最终顺序的元素索引。 最后，我认为我需要从其索引中获取项目 id，

var index = indexof($('#element'+i)); // ok this is not lookink like correct :)

但我没找到。

Answer 1

对于这个 html:

<div class="container">
    <div class="element" id="element6">1</div>
    <div class="element" id="element2">2</div>
    <div class="element" id="element8">3</div>
    <div class="element" id="element4">4</div>
    <div class="element" id="element1">5</div>
    <div class="element" id="element7">6</div>
</div>

和这个 javascript:

var arr = Array();
$('.container .element').each(function(){
   arr.push($(this).attr('id').replace('element', ''));
})

你会得到这个：

arr = ["6", "2", "8", "4", "1", "7"]

Answer 2

对于此标记（重新排序的元素...）：

<div class="container">
    <div class="element" id="element4"></div>
    <div class="element" id="element1"></div>
    <div class="element" id="element5"></div>
    <div class="element" id="element6"></div>
    <div class="element" id="element7"></div>
</div>

$('.container').find('.element') 命令将按照元素在文档中出现的顺序生成元素。

elements = $('.container').find('.element')
console.log(elements[0].id) // will print out 'element4'
console.log(elements[2].id) // ---> 'element5'

等等......

从'elementX'字符串中获取数字id只需这样做

parseInt(elements[3].id.replace('element','')) // will return 6

Answer 3

我认为你最好只创建一个包含 N 个元素的数组并使用 div 的起始顺序对其进行初始化。然后，每次交换元素并更改其顺序时，您都会通过交换相应的元素来更新数组，并且每次只需读取数组即可获取当前顺序。

例如，假设您有 10 个元素，则可以使用以下方法初始化数组：

order = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);

每次进行重新排序时，假设您将元素编号 X 与元素编号 Y 交换，您还交换了相应的数组元素：（

swap(order, X, Y);

您必须定义一个顺便说一句，交换函数）。
因此 order 数组每次都会包含当前订单。