我可以在 HTML 标记中添加额外的内容，以便我的 JQuery 可以使用它吗？答案

【问题标题】：Can I stick extra stuff in HTML tags so that my JQuery can pick up on it?我可以在 HTML 标记中添加额外的内容，以便我的 JQuery 可以使用它吗？
【发布时间】：2010-12-01 12:53:58
【问题描述】：

<div id="holder" rel="http://mysite.com/go.jpg" rel2="42pixels" rel3="gaga">
blah
</div>

这是否允许？

【问题讨论】：

你到底想做什么？可以用jQuery's data system?完成吗

标签： javascript html css templates

【解决方案1】：

如果可能，我建议使用HTML5's custom data attributes 来实现：

<div id="holder" rel="http://mysite.com/go.jpg" data-rel2="42pixels" data-rel3="gaga">
    blah
</div>

【讨论】：

【解决方案2】：

这种情况的常用方法是使用data-*pseudo-namespace。

这并不适用于所有版本的 HTML；但它相对无害且非常方便；并且比许多其他方法要好得多。

编辑：示例总是很棒：

<!-- In an HTML file loaded with AJAX, for instance: -->
<ul>
  <li data-id="1">My Little Pony</li>
  <li data-id="2">Transformers</li>
</ul>

【讨论】：

【解决方案3】：

data-* 属性是添加自定义属性的正确方法，但这仅在 HTML5 中有效。就个人而言，我通常使用id 或class 属性来传递额外的数据。在您的情况下，您甚至可以执行以下操作：

<div id="holder" class="http://mysite.com/go.jpg_42pixels_gaga">blah</div>

然后使用这些方法来访问该数据：

var divParams = $("#holder").attr("class").split('_');
alert('Param 1 is: ' + divParams[0] + ' / Param 2 is: ' + divParams[1] + ' / Param 3 is: ' + divParams[2]);

当然，您可能希望使用比下划线更复杂的分隔符来确保您不会错误地拆分字符串，我只是将其用作 POC。

希望这会有所帮助！

【讨论】：

【解决方案4】：

不，它不会以这种方式验证：http://www.alistapart.com/articles/scripttriggers/

您可以提供自定义 DTD 以使其“有效”：http://www.alistapart.com/articles/customdtd/

【讨论】：

【解决方案5】：

取决于您所说的“允许”是什么意思。它会起作用，但您的验证将被取消。 class 属性旨在涵盖这些类型的扩展（尽管除了 CSS 之外没有人真正将它用于任何东西，因此可以说这样做是事实上滥用）。

【讨论】：

没想到这是class的初衷。因此，如果您想存储例如图像 id 为 42，实际意图是你应该做class="imageId42"（或类似的）？我觉得这很尴尬。
@Frode - 这很尴尬！类最初被认为是为了扩展有关元素的数据。您会遇到一些 JS 应用程序时不时地执行此操作，但现在它违反了最小惊讶原则，因此不受欢迎。