Question

我必须在我的数组中插入一些Dom元素，有时候，从数组中删除。

以下是我正在做的事情：

var myDOMS = new Array();
myDOMS.push($("#myDiv"));

var element_to_remove = $("#myDiv");
var index = $.inArray(element_to_remove, myDOMS);
if (index > -1) {
  myDOMS.splice(index, 1);
}

关于删除的部分不起作用。你知道我做错了什么吗？可能吗？

Answer 1

每次评估$("#myDiv")时，您都会收到一个新对象。所以这是从不是真的：

$("#myDiv") === $("#myDiv")

如果你想这样工作，你应该真正使用DOM元素引用。像这样：

var myDOMS = new Array();
myDOMS.push($("#myDiv").get(0));

var element_to_remove = $("#myDiv").get(0);
var index = $.inArray(element_to_remove, myDOMS);
console.log(index);
if (index > -1) {
  myDOMS.splice(index, 1);
}

Answer 2

首先，纠正。

你不是在谈论DOM，你在谈论jQuery集合。 @trincot提到了这一点。 $(XYZ)为您提供一个新对象，其中包含由选择器匹配的所有DOM元素的集合（XYZ部分）。

有了这个，这里是没有jQuery并发症的解决方案：

var elements = []; //prefer literal constructor over "new Array();" for brevity
elements.push(document.getElementById("myDiv"));

var element_to_remove = document.getElementById("myDiv");
var index =  elements.indexOf(element_to_remove);

console.log("element index: "+index);

if(index !== -1){
   //element was present in the array
   elements.splice(index,1);
}

<div id="myDiv"></div>

Answer 3

所以你遇到的问题是，当你使用jQuery选择器时，你创建了一个独特的jQuery对象（或对象集合，如果有多个），它包含一堆有关匹配元素的信息，包括对DOM元素本身的引用（第一部分信息，可由$("#someElement")[0]

引用）

由于这些对象是唯一的，虽然它们可能包含有关返回元素的相同信息，但对象本身并不相同。所以，对于：

var bodyRef1 = $("body");
var bodyRef2 = $("body");
var bodyRef3 = $("body");

您会发现对象中包含的值都相等：

bodyRef1[0] === bodyRef2[0] === bodyRef3[0]
bodyRef1.context === bodyRef2.context === bodyRef3.context
etc. . . .

对象本身不是

bodyRef1 !== bodyRef2 !== bodyRef3

在你的情况下，除非你有一个特定的原因需要以jQuery格式选择元素，否则你可能最好只做一个原生的JavaScript选择，并删除额外的复杂层：

var myDOMS = new Array();
myDOMS.push(document.getElementById("myDiv"));

var element_to_remove = document.getElementById("myDiv");
var index = $.inArray(element_to_remove, myDOMS);
if (index > -1) {
  myDOMS.splice(index, 1);
}

这是有效的，因为本机JS选择仅返回对DOM元素的引用。

从数组中删除DOM元素

3 个答案: