Доступ к нескольким элементам одинакового идентификатора в jQuery

Если у меня есть такие элементы, как этот

<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

Ответ 1

Не создавайте разметку, содержащую элементы с повторяющимися идентификаторами. Это сломает вещи, и вы будете быстрее изгибаться ускорителем чем вы можете сказать "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"); 
    });
});

Re: Комментарий к OP

"Как узнать, какое изображение нажата?"

Используйте ключевое слово this:

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

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

... Я думаю, что вы ищете.

Ответ 2

Если унаследованный код настолько ужасен, что вы можете работать только с ошибкой вывода, используйте jQuery("[id=theidthatshouldbeaclassinstead]") или jQuery("[id*=theidthatshouldbeaclassinstead]"), если по какой-то причине есть несколько идентификаторов.

Ответ 3

Если несколько элементов будут совместно использовать определенное свойство, вам следует назначить класс вместо id. Таким образом, полученный код jQuery будет выглядеть примерно так:

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

Идентификатор должен использоваться для однозначной идентификации элементов.

Ответ 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 to detect content bugs.
        return $(document.querySelectorAll('#' + CSS.escape(id)))
    }
};