在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数组编号对应的正确数字格式排序

Answer 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')); 
    });
});

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

Answer 2

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

Answer 3

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

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

ID用于唯一标识元素。

Answer 4

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

另外请不要忘记，id的值必须在CSS查询中进行转义。虽然最近版本的Chrome / Firefox原生支持CSS.escape()，但IE可能需要填充：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)))
    }
};