Конвертировать сложный контейнер div в компонент React

Должен быть только один элемент с заданным id. Если вы застряли в этой ситуации, см. Вторую половину моего ответа для параметров.

Как работает браузер, когда у вас есть несколько элементов с одним и тем же идентификатором (нелегальный HTML), не определяется спецификацией. Вы можете протестировать все браузеры и узнать, как они себя ведут, но неразумно использовать эту конфигурацию или полагаться на какое-либо конкретное поведение.

Используйте классы, если вы хотите, чтобы несколько объектов имели один и тот же идентификатор.

    1
    2
    3


$(function() {
    var w = $("div");
    console.log($(".a").length);            // 2
    console.log($("body .a").length);       // 2
    console.log($(".a", w).length);         // 2
});

Если вы хотите надежно смотреть на элементы с идентификаторами, которые являются одинаковыми, потому что вы не можете исправить документ, тогда вам придется выполнять свою собственную итерацию, так как вы не можете полагаться на какие-либо из встроенных функций DOM.

Вы можете сделать это следующим образом:

function findMultiID(id) {
    var results = [];
    var children = $("div").get(0).children;
    for (var i = 0; i < children.length; i++) {
        if (children[i].id == id) {
            results.push(children[i]);
        }
    }
    return(results);
}

Или , используя jQuery:

$("div *").filter(function() {return(this.id == "a");});

Рабочий пример jQuery: http://jsfiddle.net/jfriend00/XY2tX/ .

Что касается того, почему вы получаете разные результаты, которые связаны с внутренней реализацией любой части кода, выполняющей фактическую операцию селектора. В jQuery вы можете изучить код, чтобы узнать, что делает какая-либо данная версия, но поскольку это незаконный HTML, нет гарантии, что он будет оставаться неизменным с течением времени. Из того, что я видел в jQuery, он сначала проверяет, является ли селектор простым id, например #a, и если да, просто использовал document.getElementById("a"). Если селектор более сложный, чем querySelectorAll(), jQuery часто передает селектор в функцию встроенного браузера, которая будет иметь реализацию, специфичную для этого браузера. Если querySelectorAll() не существует, то он будет использовать механизм выбора Sizzle, чтобы вручную найти селектор, который будет иметь собственную реализацию. Таким образом, вы можете иметь как минимум три разных реализации в одном и том же семействе браузеров в зависимости от точного селектора и того, как новый браузер. Затем отдельные браузеры будут иметь свои собственные реализации querySelectorAll(). Если вы хотите надежно справиться с этой ситуацией, вам, вероятно, придется использовать свой собственный итерационный код, как показано выше.