通过对应html元素改变数组中item的索引

Question

我动态地将元素添加到容器中，然后使用 jquery UI 更改动态元素的位置并且它工作正常。动态元素是通过遍历数组构造的。我想要实现的是，当我更改动态元素的位置时，我也想将数组项索引更改为相应的值。当我将一些动态元素移动到另一个位置但弄乱了其他位置时，我在下面尝试的方法有效。我怎样才能解决这个问题？提前致谢。

更新：长话短说，绿色块上的数字应该与数组中的数字相同（位置也相同）

function array_move(arr, old_index, new_index) {
  if (new_index >= arr.length) {
    var k = new_index - arr.length + 1;
    while (k--) {
      arr.push(undefined);
    }
  }
  arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
  return arr;
};

let myArr = [1, 2, 3, 4]

for (var i = 0; i < myArr.length; i++) {
  $('.container').append(`<div class="wrapper" id="${i}">${myArr[i]}</div>`)
}

let firstIndex;
let secondIndex;

$('.container').sortable({
  update: function(event, div) {
    firstIndex = div.item.attr('id')
  },
  stop: function(event, div) {
    secondIndex = div.item.index()
    array_move(myArr, firstIndex, secondIndex)
    console.log(myArr)
  }
})

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: fit-content;
  height: fit-content;
  padding: 3%;
  background-color: yellow;
}

.wrapper {
  display: flex;
  width: 15vw;
  height: 8vh;
  cursor: pointer;
  margin-bottom: 5%;
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

<div class="container">

</div>

Answer 1

你给出的是索引的 ID 而不是数组的内容。

将值存储在数据属性中更有意义。

let myArr = [1, 2, 3, 4]
const $container = $('.container');
for (var i = 0; i < myArr.length; i++) {
  $container.append(`<div class="wrapper" data-item="${myArr[i]}"></div>`)
}


$container.sortable({
  stop: function(event, div) {
    myArr = $(".wrapper").map(function() { return this.dataset.item }).get()
    console.log(myArr)
  }
})

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: fit-content;
  height: fit-content;
  padding: 3%;
  background-color: yellow;
}

.wrapper {
  display: flex;
  width: 15vw;
  height: 8vh;
  cursor: pointer;
  margin-bottom: 5%;
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

<div class="container">

</div>

Answer 2

这是我的问题的工作版本。任何改进表示赞赏。

function array_move(arr, old_index, new_index) {
  if (new_index >= arr.length) {
    var k = new_index - arr.length + 1;
    while (k--) {
      arr.push(undefined);
    }
  }
  arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
  return arr;
};

let myArr = [1, 2, 3, 4]

for (var i = 0; i < myArr.length; i++) {
  $('.container').append(`<div class="wrapper" id="${i}">${myArr[i]}</div>`)
}

$('.container').sortable({
  stop: function(event, div) {
    let elemId = div.item.attr('id')
    let elemIndex = div.item.index()
    
    array_move(myArr, elemId, elemIndex)
    
    $('.container').html(``)
    for (var i = 0; i < myArr.length; i++) {
      $('.container').append(`<div class="wrapper" id="${i}">${myArr[i]}</div>`)
    }
    
    console.log(myArr)
  }
})

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: fit-content;
  height: fit-content;
  padding: 3%;
  background-color: yellow;
}

.wrapper {
  display: flex;
  width: 15vw;
  height: 8vh;
  cursor: pointer;
  margin-bottom: 5%;
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

<div class="container">

</div>