在jQuery中访问多个具有相同ID的元素

Question

如果我有这样的元素

<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数组数字相对应的正确数值格式进行排序。

- Angel.King.47

---

你能掌控HTML吗？元素应该拥有唯一的ID。 - Chris

是的，我可以。如果元素是唯一的，我已经想出了如何做到这一点，但我想创建一个事件处理程序。我可以使用不同的ID吗？ 是的，可以使用不同的ID来创建一个事件处理程序。 - Angel.King.47

Answer 1

不要创建包含重复ID的元素的标记。 这会导致错误，并且你将在一眨眼的功夫内被迅速攻击的迅猛龙所撕裂，简直快得连"goto"这个词都来不及说出口。

请改用类(class)：

<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"); 
    });
});

---

回复：楼主的评论

"我怎么知道哪个图片被点击了？"

使用this关键词：

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

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

我认为那就是你要找的。

- Matt Ball

---

我从C#的角度思考，你可以有两个不同的按钮使用相同的事件处理程序。 - Angel.King.47

@Angel：我不明白，请澄清一下。 - Matt Ball

我如何知道哪个图像被按下了？ - Angel.King.47

@Angel：在回调函数中，this 的值是触发事件的元素（未经 jQuery 处理）。请参考我的编辑。 - Matt Ball

我们需要向http://foundation.zurb.com/learn/features.html发送一些迅猛龙。(截至2014年8月28日，例如在Chrome的开发者工具中，document.querySelectorAll('#main-content').length为7。) - Jacob Oscarson

Answer 2

如果你继承了一些糟糕的代码，无法正常工作，可以使用 jQuery("[id=theidthatshouldbeaclassinstead]") 或者 jQuery("[id*=theidthatshouldbeaclassinstead]")（如果有多个 ID 的话）来处理。

- Cees Timmerman

Answer 3

如果多个元素共享某个属性，应该给它们分配类而不是ID。因此，生成的jQuery代码将类似于以下内容：

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

ID 用于唯一标识元素。

- David

Answer 4

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

还要记住，在CSS查询中必须转义id的值。虽然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)))
    }
};

- Dmitriy Sintsov