将一个元素与一个唯一的数字相关联

Associate an element with a unique number

本文关键字：一个 数字 关联 元素 唯一      更新时间：2023-09-26

我正在寻找一种将DOM元素与唯一数字相关联的方法，这样DOM中的任何其他元素都不会与该数字相关联。显然，我不能使用Id属性，因为不是所有元素都有Id。

最明显的方法是（以某种方式）获取一个数字，该数字将给出元素在DOM中的位置，但我不确定这是否可行。最终，给定DOM中的任意元素，我希望有一种将该元素映射到数字的方法。

每个人都在问我为什么需要这样做——给定一个DOM元素，我需要将该元素用作JS对象中的键。JS对象必须是字符串。因此，从技术上讲，我本身不需要一个唯一的数字，但我需要一个可以转换为"短字符串"并用作JS对象中的键的唯一值

从技术上讲，我本身不需要一个唯一的数字，但我需要一个可以转换为"短字符串"并用作JS对象中的键的唯一值。

我看到你已经标记了jQuery。这可能是解决你问题的一个可能办法。jQuery有一种将元素与对象关联的方法：

var ele = /* your element */
$(ele).data({name: "Paul"});
// later you can use the element as a key
$(ele).data();  //returns {name: "Paul"}

这将避免整个"分配唯一id"的混乱，只需让jQuery为您做所有的艰苦工作（创建地图数据结构）。

由Roamer-1888编辑

基本上，我需要对一个元素进行唯一的"标记"，这样，如果我将来遇到相同的元素，我就会知道我以前见过它。"标记"值将是我的JS对象中的键。我将关联标记元素中的各种值。我不想使用Map或WeakMap，因为它们可能不是所有浏览器都支持的。

为了满足这个要求，您通常会使用jQuery的.data()，如下所示：

//...
var elementData = $(ele).data('myApplication');
if(!elementData) { // this element was not previously encountered
    elementData = {
        prop_A: ...,
        prop_B: ...,
        prop_C: ...
    };
    $(ele).data('myApplication', elementData);
}
// Here `elementData` is guaranteed to exist and its properties can be read/written.
//...

这种技术对于在jQuery插件中预先保存状态特别有用。以下是的示例

多个应用程序/模块可以做到这一点，而不会相互干扰。

我猜，如果我们了解真正的问题是什么，可能会有更好的方法来解决您的问题。但是，在任何时间点，您都可以通过以下内容找到元素的位置（如果它当前插入文档中）：

var items = document.getElementsByTagName("*");

如果您需要（在这个特定的时间点）为DOM元素获取一个唯一的索引，只需在HTMLCollection中搜索即可。它在集合中的位置保证是唯一的索引。

但是，当然，随着DOM的修改，这个HTMLCollection和索引也会发生变化。

如果您想分配一个不变的唯一索引，您可以根据单调递增的计数器为每个DOM元素分配一个属性。

var idCntr = 1;
function assignIds() {
    var items = document.getElementsByTagName("*");
    for (var i = 0; i < items.length; i++) {
        if (!items[i]._uniqueId) {
            items[i]._uniqueId = idCntr++;
        }
    }
}

您可以根据需要多次调用此函数，它将为任何还没有id的DOM元素分配新的唯一id，但会保留已分配的id（因此它们永远不会更改）。

如果您只想为任何给定的DOM节点生成一个唯一的ID，这样您就可以始终为该DOM节点生成相同的ID，那么您可以再次使用单调递增计数器。

 var idCntr = 1;
 function assignId(elem) {
     if (!elem._uniqueId) {
         elem._uniqueId = idCntr++;
     }
     return elem._uniqueId;
 }

然后，您可以在想要为其分配唯一ID的任何DOM元素上调用此函数，它将为该元素分配ID并返回其分配的ID。如果你给它传递一个已经有id的元素，它会保留这个id并返回它

根据您最近的编辑，您似乎只是在尝试生成一个id字符串，该字符串可以用作JS对象中的键。您当然可以使用上面的assignId()函数。

在现代浏览器中，您还可以使用地图或WeakMap对象，它将接受DOM对象本身作为键-您不需要制造自己的字符串键。然后，您也可以直接使用DOM元素查找它（因为它是关键）。

相关文章：