向一个元素添加多个唯一 ID

Posted 2023-02-21

【中文标题】向一个元素添加多个唯一 ID

【英文标题】：Add multiple unique ids to an element

【发布时间】：2013-01-23 05:14:35

【问题描述】：

我需要为元素添加第二个唯一 ID。

我用它来生成新的ID

var id = 1;
function getNextId()

    return ++id;

那我就这样做了

$('<div id="content '" + getNextId() +"'" class="span6"></div>').appendTo('.new');

但我收到了Uncaight SyntaxError: Unexpected identifier

如何添加多个 id 而第二个是唯一的？

（我会在点击时删除第一个 id，所以我可以将#content 留在那里）

这里讨论了一个元素上的多个 id：Can an html element have multiple ids?

【问题讨论】：

它首先看起来像$('<div id="content 'newId'" + getNextId() +"' class="span6"></div>').appendTo('.new'); 应该更像是：$('<div id="content ' + newId + '"' + getNextId() + ' class="span6"></div>').appendTo('.new'); 但除此之外，newId 是什么？很难说出选择器中的变量是什么，因为单引号和双引号很好地混合在一起。你能确定那些是你认为它们应该在的地方吗？

你的引用是错误的。

newId 是我在生成的唯一 ID 之前放置的字符串，否则我会有一个数字

查看语法高亮。此外，元素 ID 中不能有空格。

一个元素只能有一个ID。如果您使用的是 XHTML，您可以添加一个命名空间 ID 属性，但这不是技术上一个 ID，它是一个不同的属性。

【参考方案1】：

我认为一个很好的开始是在此处添加+。

'<div id="id-' my_id_var '"></div>'

只是行不通。

"<div id=\"id-" + getNextID() + "\"></div>"

不过会很好用。

第二个问题，每个元素都有1 ID。 关键是给定一个 ID 以使元素唯一可识别。 为什么你希望元素是唯一可识别的两次？

还有很多其他方法可以做到这一点。

首先，你有class。 如果您正在处理需要类似状态的对象（“选定”、“新闻文章”、“用户交互”），请使用类。

那么，你就有了data- 属性。

<div id="player_1"
     class="player-character"
     data-health="42"
     data-x="320"
     data-y="240"
     data-speed="5"
    ><img src="..."
></div>

然后在 JS 中，你可以这样做：

var player_1 = document.getElementById("player_1");
player_1.dataset.health;  // "42"

我认为这些值可以追溯到 IE8。 如果你想走得更远，那么不要使用.dataset，而是使用.setAttribute("data-" + field_name, value)

如果您使用的是 jQuery，那么无论如何它都会为您处理所有这些。

那么有了所有这些选项，为什么要每个元素有 2 个 id？

【参考方案2】：

看起来像：

$('<div id="content '+ newId + getNextId() +'" class="span6"></div>').appendTo('.new');

我敢打赌这更正确

【参考方案3】：

试试这个：

$('<div id="content-' + getNextId() + '" class="span6"></div>').appendTo('.new');

【讨论】：

我需要保留 newId，因为它是我在创建的 uniqe id 之前放置的字符串，否则它将是一个数字

【参考方案4】：

你的代码有两个问题：

'a'b 不是有效的 JavaScipt。试试'a' + b

HTML ID 中不允许使用空白字符。即使它们是，id 属性中的所有字符都将构成 ID，因此您不能为一个元素分配多个 ID。请改用class。

【参考方案5】：

如何添加多个 id 而第二个是唯一的？

你不能。

您不能在一个元素上拥有多个 ID。每个元素你得到零个或一个 ID，就是这样。如果你想添加额外的东西来选择元素，你可以使用类。

您的语法错误是由于一些非常混乱的引号引起的；我怀疑你想这样做：

$('<div id="content newId' + getNextId() + '" class="span6"></div>')

产生类似<div id="content newId3"> 的东西，这是行不通的。您不是给它两个 ID，而是给它一个带有空格的 ID，这是一个无效的 ID：

ID 和 NAME 标记必须以字母 ([A-Za-z]) 开头，后跟任意数量的字母、数字 ([0-9])、连字符 ("-")、下划线 (" _")、冒号 (":") 和句点 (".")。

【讨论】：

看看这个：***.com/questions/192048/…

因此考虑到我们实际上可以有 2 个不同的 id，您建议完全输出 2 id= 而不是将 2 连接到一个 id= 中，否则我会得到您所说的，1 id 名称中是否有空格？

基本上是这样吧？ $('').appendTo('.new');

@rob.m：你不能有2个不同的ID，你也不能定义同一个属性两次。他只是在您的代码中指出语法错误。您可以在 XHTML 中做到这一点：<p id="foo" xml:id="bar">，但这只是因为它是命名空间的。

@rob.m 否。我的意思是你做不到。您不能有两个 ID。不可能。 没有这样做的有效语法。