javascript - 将元素从一个数组移动到另一个数组

Question

我尝试制作以下 Stackblitz 使用 ng2-dragula。我的问题在于 moveback() 和 moveto() 函数，它们应该在选择元素时从一个数组移动到另一个数组。我能够检测到选择了哪个元素，但无法完全移动它们(遗留了一些元素)。

相关代码:

  moveback() {
    let target = document.getElementsByClassName('target');
    for (let i = 0; i < target.length; i++) {
      if (target[i].className.includes('ex-over')) {
        this.removeClass(target[i], 'ex-over');
        this.data.push({ name: target[i].innerHTML });
        this.target.splice(i, 1);
      }
    }
  }

  moveto() {
    let target = document.getElementsByClassName('data');
    for (let i = 0; i < target.length; i++) {
      if (target[i].className.includes('ex-over')) {
        this.removeClass(target[i], 'ex-over');
        this.target.push({ name: target[i].innerHTML });
        this.data.splice(i, 1);
      }
    }
  }

我找到了两个 related(1) , related(2)问类似问题的问题，但在我的情况下不起作用。我的方法是检测元素是否包含某个类名，然后删除该类并将它们移动到另一个数组并将其从原始数组中删除。但它没有按预期工作。

Answer 1

更新您的 for 条件，如下所示。

for (let i = target.length - 1; i >= 0; i--) {...}

您的逻辑问题是，如果您选择 2nd & 3rd 元素并应用 moveto，那么对于 2nd 元素它将正常工作。但是随后在您的实际 this.target 数组中将被更改。现在 3rd 元素将变成 2nd 因为你的行 this.target.splice(i, 1);。因此，当您在 for 循环迭代中移动 3rd 元素时，它实际上会移动 4th 元素。

Check with Updated fiddle Here