Fatal编程技术网
  • javascript/
  • Javascript 将元素与唯一编号关联

Javascript 将元素与唯一编号关联

javascript jquery dom

Javascript 将元素与唯一编号关联,javascript,jquery,dom,Javascript,Jquery,Dom,我正在寻找一种将DOM元素与唯一数字关联的方法，这样DOM中的其他元素就不会与该数字关联。显然，我不能使用Id属性，因为并非所有元素都有Id 最明显的方法是（以某种方式）获取一个数字，该数字将给出元素在DOM中的位置，但我不确定这是否可行。最后，给定DOM中的任意元素，我希望有一种将该元素映射到数字的方法 每个人都在问我为什么需要这样做——给定一个DOM元素，我需要将该元素用作JS对象中的键。JS对象必须是字符串。因此，从技术上讲，我不需要一个唯一的数字，但我需要一个唯一的值，可以转换为“短字符

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

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

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

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

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++;
        }
    }
}

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

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

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++;
        }
    }
}

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

从技术上讲，我不需要一个唯一的数字，但我需要一个唯一的值，它可以转换为“短字符串”，并用作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为您完成所有的艰苦工作（创建地图数据结构）

编辑人

基本上，我需要唯一地“标记”一个元素，这样如果我将来遇到相同的元素，我就会知道我以前见过它。“tag”值将是我的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插件中保存状态特别有用

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

从技术上讲，我不需要一个唯一的数字，但我需要一个唯一的值，它可以转换为“短字符串”，并用作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为您完成所有的艰苦工作（创建地图数据结构）

编辑人

基本上，我需要唯一地“标记”一个元素，这样如果我将来遇到相同的元素，我就会知道我以前见过它。“tag”值将是我的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插件中保存状态特别有用