Question

我正在寻找一种方法来将DOM元素与唯一编号相关联，这样DOM中的其他元素就不会与该编号相关联。显然，我无法使用Id属性，因为并非所有元素都有Id。

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

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

Answer 1

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

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元素查找它（因为它是密钥）。

Answer 2

从技术上讲，我本身并不需要一个唯一的数字，但我需要一个可以变成＆＃34;短字符串的唯一值＃34;并用作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"}

这将避免整个＆＃34;分配唯一ID＆＃34;混乱，让jQuery为您完成所有艰苦的工作（创建地图数据结构）。

按Roamer-1888编辑

基本上，我需要＆＃34;标记＆＃34;一个独特的元素，如果我将来遇到相同的元素，我会知道我以前见过它。＆＃34;标签＆＃34; value将是我的JS对象中的关键。我将关联标记元素中的各种值。我不想使用Map或WeakMap，因为它们可能并不支持所有浏览器。

要满足此要求，您通常会使用jQuery＆＃39; .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插件中预先显示状态特别有用。 Here is an example

多个应用程序/模块可以在不相互干扰的情况下执行此操作。

将元素与唯一编号相关联

2 个答案: