具有特定ID的元素的保存(和通过)位置(可能是数组)

Question

我正在寻找一种保存具有特定ID的DIV中元素的方法。

理想情况下，我只想保存他们的ID和它们出现在Div中的顺序。它们被复制在使用Dragula库上。

我的JS无处不在：

dragula([document.querySelector('.container1'), document.querySelector('.container2')], {
  copy: function (el, source) {
    return source === document.querySelector('.container1')
  },
  accepts: function (el, target) {
    return target !== document.querySelector('.container1')
  },
   removeOnSpill: true
  });
var findId = $('.container2').find(id^=n);
$('.showMeId').append(findId);

完整的，在Codepen上的工作示例：https://codepen.io/anon/pen/nybwoy

Answer 1

首先，您需要触发事件以运行ID检查。其次，复制HTML元素时，ID可能是一件艰难的事情，因为它们确实应该是独特的。您是否考虑过独特的班级名称？

由于某种原因，jQuery选择器无法与您正在使用的此库一起使用。这可能是一个编码器问题，也可能是可拖动的问题。

使用香草JS，有两种方法可以完成选择和显示。此代码应该帮助您踏上正确的DOM数据的正确途径：

对于特定元素ID：

<button id="demo" onclick="seeId()">Click</button>
function seeId(){
  var idbox = document.getElementById('n3');
  document.querySelector('.showMeId').innerHTML = idbox.textContent;
}

要进一步操纵所有元素，您可以使用JavaScript方法.Children/.firstchild/etc

function seeId(){
  var idboxes = document.querySelector('.container2').children;
  document.querySelector('.showMeId').appendChild(idboxes[0]);
  for(var i of idboxes){
    console.log('or do something with each node ', i);
  }
}