javascript - JQuery 选择器有选择地选择

Question

我有以下 HTML

<i class="up_icon" id="1" />
<p class="position">1</p>
<i class="down_icon" id="1" />

我可以选择.up_icon#1但不能.down_icon#1

var u = $(".up_icon#1");     //=  [<i class="up_icon" id="1">&lt;/i>]

var d = $(".down_icon#1");   //=  []

我在这里想念什么？

score 4 · Accepted Answer

你不应该像那样复制 ID。ID 在文档中应该是唯一的。

在您的情况下，您可以使用 jQuery 属性选择器功能。见下文，

<i class="up_icon" data-id="1"/>
<p class="position">1</p>
<i class="down_icon" data-id="1"/>

然后您可以通过.up_icon[data-id=1]and访问它们.down_icon[data-id=1]

score 1 · Accepted Answer

can select .up_icon#1 but not .down_icon#1

这是因为重复的 Id 是无效的 HTML 并丢弃了选择器。

jQuery 要求您在整个页面中拥有唯一的 ID，否则您将遇到意外的行为。

取自 jQuery id 选择器文档

每个 id 值只能在文档中使用一次。如果为多个元素分配了相同的 ID，则使用该 ID 的查询将仅选择 DOM 中第一个匹配的元素。但是，不应依赖此行为；具有多个使用相同 ID 的元素的文档无效。

将您的 HTML 更改为：

<i class="up_icon" id="1" />
<p class="position">1</p>
<i class="down_icon" id="2" />

现在您可以选择.up_icon#1或.down_icon#2。

显然，如果您能找到一种方法来应用除普通数字之外的更具描述性的标识符，以防止任何事情重复发生。
如果需要，您还可以使用可选的数据属性data-value="1"来存储任何序列或记录 ID。jQuery 选择器对于数据属性或类中的相同值没有问题。

score 1 · Accepted Answer

您永远不应该将相同的 ID 分配给多个标签

还：

从 HTML 规范：

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

score 0 · Accepted Answer

你应该切换你的类和 id 定义。试试这个：

<i id="up_icon" class="1" />
<p class="position">1</p>
<i id="down_icon" class="1" />

var u = $("#up_icon.1");

var d = $("#down_icon.1");

4 回答 4