Question

想象一下，我有这个HTML结构：

bind()

正如您所看到的，我在两个不同的div（bodyRead和bodyWrite）中有set()。对于更轻的代码，我更喜欢使用id而不是类（即使知道重复的ID无效，代码对我更有意义），并在jQuery上选择<div id="bodyRead"> ... <div id="List"></div> </div> ... <div id="bodyWrite"> ... <div id="List"></div> </div>，如下所示：

#List

的工作原理。我总是只在子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 = name [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选择器是唯一的，但只要您确保使用正确的嵌套，您的代码就会起作用。换句话说，#bodyRead #List和#bodyWrite #List完全没问题，只要您不通过将父选择器省略到#List来创建歧义。

但是，在同一页面上使用多个相同的ID只是在寻找麻烦。您应该重新考虑转换到课程选择器，或重新评估是否真的值得坚持您的原始想法的潜在麻烦。

Answer 4

我觉得这是一个糟糕的方法，因为浏览器为页面创建DOM（文档对象模型），考虑到每个Id都有一个唯一的值。在javascript中很难使用重复的Id当你想要操纵时，你需要每次都考虑父亲和孩子的身份。因此，最好使用类。

Answer 5

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

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

即使您的代码现在由于jQuery的工作原理而起作用，因为html规范说不这样做，您无法确定您的代码将来会继续有效。

具有相同ID的jQuery子元素

5 个答案: