從數組中刪除 DOM 元素

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)您提供一個新對象，其中包含由選擇器（ XYZ部分）匹配的所有 DOM 元素的集合。

有了這個，這里是沒有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 元素的引用。