具有相同ID的jQuery子元素

Question

想象一下我具有以下HTML结构：

    <div id="bodyRead">
          ...
            <div id="List"></div>
    </div>

   ...

    <div id="bodyWrite">
          ...
            <div id="List"></div>
    </div>

正如你所看到的，我有#List内部的两个不同的div（bodyRead和bodyWrite）。 对于更简单的代码，我更喜欢使用id而不是类（即使知道重复的ID无效，该代码对我来说更有意义），然后像这样在jQuery上选择#List ：

$('#bodyRead #List').off('click').on('click', function() ...
$('#bodyWrite #List').off('click').on('click', function() ...

作品。 我一直只在子div上制作重复ID，在这里我可以在jQuery选择器上通过其父div分隔它们。

这种方法很错误吗？ 我的意思是，这会给我带来麻烦吗？

Answer 1

即使在子元素中也不要重复您的ID。将其更改为class =“ List”，然后您可以使用

$('.List').on('click',function(){
    var getparent = $(this).parent().attr('id');
    alert(getparent);
});

并且如果class =“ List”不是#bodyRead或#bodyWrite中任何一个的第一级子级

给它添加类

 <div id="bodyRead" class="mainDiv">
 <div id="bodyWrite" class="mainDiv">

然后使用

$('.List').on('click',function(){
    var getclosest = $(this).closest('.mainDiv').attr('id');
    alert(getclosest);
});

Answer 2

您应该期望CSS和JavaScript（包括jQuery和其他框架）的行为符合HTML规范。 ID必须是唯一的，不支持同一ID的多个实例。 见下文：

根据HTML 4.01规范：

id =名称[CS]此属性为元素分配名称。 此名称 在文档中必须唯一。

class = cdata-list [CS]此属性为一个元素分配一个类名或一组类名。 可以为任意数量的元素分配相同的一个或多个类名。 多个类名称必须由空格字符分隔。

http://www.w3.org/TR/html401/struct/global.html#h-7.5.2

这来自HTML 5规范：

3.2.5.1 id属性

id属性指定其元素的唯一标识符 （ID）。 [DOM]

该值在元素的 主子树 中的所有ID中必须唯一，并且必须至少包含一个字符。 该值不得包含任何空格字符。

ID可以采用的形式没有其他限制； 特别是，ID可以仅由数字组成，以数字开头，以下划线开头，仅包含标点符号等。

元素的唯一标识符可以用于多种目的，最显着的方式是使用片段标识符链接到文档的特定部分的方式，脚本编写时将元素定位为目标的方式以及从中设置特定元素样式的方式CSS。

标识符是不透明的字符串。 特殊含义不应从id属性的值得出。

Answer 3

尽管id选择器是唯一的，但是只要您确保使用正确的嵌套，您的代码就可以工作。 换句话说，只要您不通过将父选择器#List而不会造成歧义，则#bodyRead #List和#bodyWrite #List就可以#List 。

尽管如此，在同一页面上使用多个相同的ID只是在问麻烦。 您应该重新考虑切换到类选择器，或者重新评估是否真的值得坚持最初的想法。

Answer 4

好吧，我觉得这是一个不好的方法，因为浏览器为页面创建了DOM（文档对象模型），其中考虑到每个ID都有一个唯一值。当您想要使用javascript中的重复ID时将很难玩要进行操纵，您需要每次都考虑父母ID和孩子ID。 因此，最好改用类。

Answer 5

您当然不应该在HTML页面中使用重复的ID。 如果您在两个不同的div中有一个相似的概念，则无论如何，类更有意义。 因此，将List ID更改为类，然后可以像这样访问它们：

$('#bodyRead .List').off('click').on('click', function() ...
$('#bodyWrite .List').off('click').on('click', function() ...

即使您的代码由于jQuery的工作方式而现在可以工作，因为html规范说不这样做，您也无法确定您的代码将来会继续工作。