已使用 id 时如何存储 div 的标识？答案

【问题标题】：How to store identification of div when id is already used?已使用 id 时如何存储 div 的标识？
【发布时间】：2012-08-08 17:02:29
【问题描述】：

所以我正在开发一个键盘前进和后退脚本，就像他们在 Tumblr 和 9GAG 上所做的那样（你可以使用 J 和 K 键浏览帖子）。

我的做法：

用户按下 J（下一个）键

Javascript 使用 JQuery Viewport 找出当前在哪个“Jump”-ID：viewport

Javascript 为“Jump”-ID 添加 +1

Javascript 获取增加的“Jump”-ID 的位置，滚动到那里

现在问题如下：

<div class="content jump" id="<?php echo $id; ?>">

我已经定义了 div 的 id。所以它看起来像这样：

<div class="content jump" id="1225">
<div class="content jump" id="1299">
<div class="content jump" id="1206">
<div class="content jump" id="1345">

但是，为了能够以正确的顺序跳转，我不知何故需要存储一个额外的标识，也许像这样......

<div class="content jump" id="1225" jump="1">
<div class="content jump" id="1299" jump="2">
<div class="content jump" id="1206" jump="3">
<div class="content jump" id="1345" jump="4">

这只是我的想象。应该有办法解决这个问题。如果您对 J/K 问题有更好的解决方案，也可以随意告诉我（也许 Tumblr 或 9GAG 有更好的解决方案？）

【问题讨论】：

只需为跳转 id 添加另一个类？

标签： javascript jquery html keyboard-shortcuts

【解决方案1】：

您可以使用data- 属性。例如：

<div class="content jump" id="1225" data-jump="1">

然后您可以使用获取该数据

$('#1225').data('jump');

【讨论】：

如何在 Javascript 中获取该数据？
@JonasKaufmann 它仍然是一个属性，您可以通过名称获取它，或者如果您使用的是 jQuery，您可以按照上面的示例进行操作。
嘿，这很有趣。那是特定于 JQuery 的东西，还是普遍支持的 Javascript？它是否有效？
data- 属性是 HTML5 规范的一部分，它们确实有效。 :) 他们已经得到了广泛的支持，所以不要担心“HTML5”标签。此外，在不支持的浏览器中，此方法仍然有效。
工作就像一个魅力！谢谢大家。

【解决方案2】：

您可以将任意数量的类应用于给定对象。因此，只需将第一个标签更改为：

<div class="content jump jump-1" id="1225">

应该给你你需要的钩子。它实际上验证了。 :)

【讨论】：

刚刚爬上我的肥皂盒。人们过分强调了 id 查找的速度优势。在现代浏览器上，$('#jump1') 和 $('.jump1') 之间的差异大约是 2 倍，并且都只需要纳秒。