Как работает 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/

  • Mvc Jquery Ajax Post возвращает null
  • Подтвердить, что дата окончания больше, чем дата начала с помощью jQuery
  • Как я могу использовать jQuery в сценариях Greasemonkey в Google Chrome?
  • Как периодически запускать запрос AJAX?
  • Проблемы, присущие jQuery $ .Deferred (jQuery 1.x / 2.x)
  • Обработка jQuery.ajax продолжается: «success:» vs «.done»?
  • Ошибка Catch, если iframe src не загружается. Ошибка: - «Отказано для отображения» http://www.google.co.in/ «в кадре».
  • Проверьте, нет ли входов пустых с помощью jQuery
  • Остановить все активные запросы ajax в jQuery
  • Как вернуть JSON из веб-службы 2.0 asmx
  • jQuery не работает после загрузки содержимого через AJAX
  • Interesting Posts

    Не удалось удалить раздел реестра

    Принудительное «git push» для перезаписывания удаленных файлов

    Можете ли вы использовать ярлык Windows + D только для одного монитора?

    ReSharper «не может разрешить символ» даже при сборке проекта

    Заключительные стоп-сигналы от бодрствования Windows 10 desktop

    Три монитора подключены, но я могу использовать только два?

    Как я могу получить пользовательский ввод в Java?

    Как получить аргументы vm из java-приложения?

    Запуск Excel 2007 в качестве администратора в Windows 7 приводит к тому, что «была проблема отправки команды в программу»

    как я могу получить форматирование текста с помощью iTextSharp

    Центрировать содержимое внутри столбца в Bootstrap 4

    загрузка файла, который поставляется в виде вложения в ответе запроса POST в PhantomJs

    Использование ПК в качестве маршрутизатора с модемом Verizon

    Как открыть чистый терминал в Mac OS X Lion?

    Как установить Windows 8 с USB-накопителя?

    Давайте будем гением компьютера.