在jQuery中访问相同ID的多个元素答案

【问题标题】：Access Multiple Elements of same ID in jQuery在jQuery中访问相同ID的多个元素
【发布时间】：2011-01-25 04:03:35
【问题描述】：

如果我有这样的元素

<img src='0.jpg' id='images' />
<img src='...' id='myEle' />
<img src='...' id='myEle' />

在 jQuery 中我可以做这样的事情

$(document).ready(function() {
    $('#myEle').mouseup(function () {

        $('#images').attr("src", myEle.getNumber() + ".jpg"); 
    }
}

显然每个元素都以与myEle数组编号相对应的正确数字格式排序

【问题讨论】：

您对 HTML 有控制权吗？元素应该有唯一的 ID。
是的，我愿意。如果元素是唯一的，但我想创建一个事件处理程序，我已经想出了如何做到这一点。我可以用不同的 ID 做到这一点吗

标签： jquery html

【解决方案1】：

不要创建包含具有重复 ID 的元素的标记。这会破坏一切，您将成为 mauled by a velociraptor faster than you can say "goto"。

改用类：

<img src='0.jpg' id='images' />
<img src='...' class='myEle' />
<img src='...' class='myEle' />

那么...

$(document).ready(function() {
    $('.myEle').live('mouseup', function () {

        $('#images').attr("src", myEle.getNumber() + ".jpg"); 
    });
});

回复：OP 评论

“我怎么知道按下的是哪张图片？”

使用this 关键字：

$(document).ready(function() {
    $('.myEle').live('mouseup', function () {

        $('#images').attr("src", $(this).attr('src')); 
    });
});

...我想这就是你要找的东西。

【讨论】：

我从 c# 角度思考。您可以在其中拥有两个具有相同事件处理程序的不同按钮
@Angel：我不明白。请澄清。
我怎么知道按下的是哪张图片？
@Angel：在回调中，this 的值是触发事件的元素（不是 jQuery-ified）。查看我的编辑。
啊，甜蜜是有道理的。谢谢：D

【解决方案2】：

如果您继承的代码太糟糕以至于只能处理错误的输出，请使用jQuery("[id=theidthatshouldbeaclassinstead]") 或jQuery("[id*=theidthatshouldbeaclassinstead]")（如果出于某种原因有多个 id）。

【讨论】：

【解决方案3】：

如果多个元素将共享某个属性，则应为它们分配 class 而不是 id。因此生成的 jquery 代码将如下所示：

$('.myEle').mouseup();

ID 用于唯一标识元素。

【讨论】：

【解决方案4】：

确实，具有相同id 的多个元素是不正确的。然而，在通用框架中生成这样的代码非常容易，例如在 Django 中，一个视图中可能有多个表单，具有相同的字段auto_id。因此，最好有 jQuery 函数来选择所有这些元素，以便客户端 Javascript 代码可以检查返回列表的长度并在这种情况下触发客户端错误/警告。

也不要忘记id 的值必须在 CSS 查询中进行转义。虽然最新版本的 Chrome / Firefox 原生支持 CSS.escape()，但 IE 可能需要一个 polyfill：https://github.com/mathiasbynens/CSS.escape

$.id = function(id) {
    // FF 54 generates warning when empty string is passed.
    if (typeof id !== 'string' || id === '') {
        return $();
    } else {
        // Support multiple ID's to detect content bugs.
        return $(document.querySelectorAll('#' + CSS.escape(id)))
    }
};

【讨论】：