Как работает jQuery, когда есть несколько элементов с одним и тем же «id»?

Я получаю данные с веб-сайта Google AdWords, который содержит несколько элементов с одинаковым id .

Не могли бы вы объяснить, почему следующие 3 запроса не приводят к одному и тому же ответу (2)?

Демо-версия

HTML:

 
1 2 3

JS:

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

6 Solutions collect form web for “Как работает jQuery, когда есть несколько элементов с одним и тем же «id»?”

Наличие двух элементов с одинаковым идентификатором недействительно html в соответствии со спецификацией W3C.

Когда ваш селектор CSS имеет только селектор ID (и не используется в конкретном контексте), jQuery использует собственный метод document.getElementById , который возвращает только первый элемент с этим идентификатором.

Однако в двух других случаях jQuery полагается на механизм выбора Sizzle (или querySelectorAll , если он доступен), который, по-видимому, выбирает оба элемента. Результаты могут варьироваться в зависимости от браузера.

Однако у вас никогда не должно быть двух элементов на одной странице с одинаковым идентификатором. Если вам это нужно для вашего CSS, используйте вместо него class.


Если вы абсолютно должны выбрать дубликат ID, используйте селектор атрибутов:

 $('[id="a"]'); 

Взгляните на скрипку: http://jsfiddle.net/P2j3f/2/

Примечание. Если возможно, вы должны квалифицировать этот селектор с помощью селектора тегов, например:

 $('span[id="a"]'); 

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

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

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

 
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() . Если вы хотите надежно справиться с этой ситуацией, вам, вероятно, придется использовать свой собственный итерационный код, как я проиллюстрировал выше.

Селектор id jQuery возвращает только один результат. descendant и multiple селекторы во втором и третьем операторах предназначены для выбора нескольких элементов. Это похоже на:

Заявление 1

 var length = document.getElementById('a').length; 

… Получает один результат.

Заявление 2

 var length = 0; for (i=0; i 

... дает два результата.

Заявление 3

 var length = document.getElementById('a').length + document.getElementsByTagName('div').length; 

... Также дает два результата.

На странице id Selector jQuery :

Каждое значение id должно использоваться только один раз в документе. Если нескольким элементам был присвоен одинаковый идентификатор, запросы, которые используют этот идентификатор, будут выбирать только первый согласованный элемент в DOM. Однако это поведение нельзя полагаться; документ с более чем одним элементом, использующим один и тот же идентификатор, является недопустимым.

Непослушный Google. Но они даже не закрывают tags и я слышу. Вопрос в том, почему 2-й и 3-й запросы Миши возвращают 2, а не 1.

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

  
1 2 3

JQ:

 $($(".demo")[0]).val("First span"); $($(".demo")[1]).val("Second span"); 

вы можете просто написать $ (‘span # a’). length, чтобы получить длину.

Вот решение для вашего кода:

 console.log($('span#a').length); 

попробуйте JSfiddle: https://jsfiddle.net/vickyfor2007/wcc0ab5g/2/

  • jQuery прокрутка к элементу
  • Автоматическое расширение текстового поля с помощью jQuery
  • Диаграмма Google Chart выводит линии тренда с датой на оси х
  • В чем разница между jQuery: text () и html ()?
  • Возможно ли создать пространство имен в jQuery?
  • Как я могу получить кнопку, которая вызвала отправку из формы отправить событие?
  • Преобразование объекта JS в массив с помощью jQuery
  • Как изменить css display none или заблокировать свойство с помощью JQuery?
  • Как переключить таблицу стилей CSS с помощью jQuery?
  • SCRIPT7002: XMLHttpRequest: ошибка сети 0x2ef3, не удалось завершить операцию из-за ошибки 00002ef3
  • Диалоговое окно JQuery UI с обратной записью на ASP.NET
  • Давайте будем гением компьютера.