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">​</i>​]

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

我在这里缺少什么？

Answer 1

你不应该像这样复制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]和.down_icon[data-id=1]

访问它们

Answer 2

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

此外：

来自HTML规范：

  

ID和NAME令牌必须以字母（[A-Za-z]）开头，可能是   后跟任意数量的字母，数字（[0-9]），连字符（“ - ”），   下划线（“_”），冒号（“：”）和句点（“。”）。

Answer 3

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

这是因为重复的ID是无效的HTML并且抛弃了选择器。

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

取自jQuery id selector documentation

  

每个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选择器在数据属性或类中没有相同值的问题。

Answer 4

您应该切换类和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");