当元素有多个 id 时匹配

Posted 2023-02-21

【中文标题】当元素有多个 id 时匹配

【英文标题】：Matching when element has multiple ids

【发布时间】：2011-09-15 21:50:55

【问题描述】：

我正在循环浏览一个表单并显示与我选择的 ID 匹配的内容。问题是某些 div 包含多个 id，在这种情况下它会停止工作。有任何想法吗？谢谢。

jQuery 代码：

$('#myForm').find('div').each(function() 
        var myId = $(this).attr('id');

        /* This will work */
        if (myId == "Select1")
                $(this).removeClass("hideMe");
                $(this).addClass("showMe");
                
        /* This does not work */
        else if (myId == "Select4")
                $(this).removeClass("hideMe");
                $(this).addClass("showMe");
                
        else

        ); 

html 代码：

<div class="hideMe" id="Select1">
<p>Some Content</p>
</div>

<div class="hideMe" id="Select2 Select3 Select4 Select5">
<p>Some Content</p>
</div>

【问题讨论】：

我会第一个说，WTF

问题是div不能有多个ID。看到这个问题：***.com/q/192048/206403

根据规范，id 不能包含空格。所以你的 HTML 无效。如果您使用无效的 HTML，则意味着从这一刻起发生的一切都是未定义的行为。而且，嘿，这种行为可能因浏览器而异。因此，首先要修复您的 HTML。

@Rocket 其实什么都不能有多个ID。

【参考方案1】：

没有“多个 id”这样的东西。

https://developer.mozilla.org/en/XUL/Attribute/id

根据标准，id 属性中的任何字符串数据都被视为值的一部分。

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

参考：http://www.w3.org/TR/REC-html40/types.html#type-name

不过，还有另一种方法！你可以有各种各样的类名，你可以使用jQuery通过类名来抓取一个元素。

HTML

<div class="hideMe Select1">
<p>Some Content</p>
</div>

<div class="hideMe Select2 Select3 Select4 Select5">
<p>Some Content</p>
</div>

Javascript

$('.Select2')[0]

[0] 部分是因为当您通过类名获取元素时，可以有多个。 jQuery 选择器返回一个数组，所以你只是抓住了第一个。

【讨论】：

为了它的价值 - 不要使用冒号或点，因为它使得不可能为元素编写一个正常的选择器。 #id.something 将 'something' 视为一个类，而 #id:something 将'something' 视为一个伪选择器。

【参考方案2】：

您不能有多个 ID。但是，如果您愿意，您可以拥有多个课程。

【参考方案3】：

拥有多个 ID 无效 - 浏览器会将 id="Select2 Select3 Select4 Select5" 视为单个字符串，但该字符串将无效，因为它包含空格。

来自 HTML 数据类型规范：http://www.w3.org/TR/REC-html40/types.html#type-name

我认为你应该为此使用类。

【参考方案4】：

ID 是唯一的，元素只能有 1 个 ID！

改为使用多个类。

【参考方案5】：

一个元素不应该有多个唯一标识符，这就是它实际上被称为 id 的原因：以将其与所有其他元素进行识别。无论如何，您必须测试 myId 是否包含 Select4 而不是测试相等性。