Использование jQuery для поиска строки HTML

Если я запускаю этот код -

var html= '<html><head></head><body><div class="bar"></div></body></html>';
console.log($(html).find('div'));

Я не получаю никаких результатов, если я запускаю этот код -

var html= '<html><head></head><body><div><div class="bar"></div></div></body></html>';
console.log($(html).find('div'));

Тогда я получаю единственный результат - внутренний div (<div class="bar"></div>). Я ожидал, что первый фрагмент кода выдаст один результат, а второй - два результата.

Точно так же этот код не возвращает результатов -

var code = $("<div id='foo'>1</div><div id='bar'>2</div>");
console.log(code.find('div'));

но этот код предупреждает "div" дважды -

var code = $("<div id='foo'>1</div><div id='bar'>2</div>");
code.each(function() {
    alert( this.nodeName );
})

Учитывая результат второго фрагмента, я ожидал, что первый фрагмент кода вернет два результата. Может кто-нибудь объяснить, почему я получаю результаты, которые я получаю?

http://jsfiddle.net/ipr101/GTCuv/

Источник

4 ответа

Решение

Давайте разделим этот вопрос на две части.

Первый:

var html= '<html><head></head><body><div class="bar"></div></body></html>';
console.log($(html).find('div'));

а также

var html= '<html><head></head><body><div><div class="bar"></div></div></body></html>';
console.log($(html).find('div'));

не работают, потому что в соответствии с jQuery() документы:

При передаче сложного HTML некоторые браузеры могут не генерировать DOM, который точно копирует предоставленный исходный код HTML. Как уже упоминалось, мы используем свойство браузера.innerHTML для анализа переданного HTML-кода и вставки его в текущий документ. Во время этого процесса некоторые браузеры отфильтровывают определенные элементы, такие как <html>, <title>, или же <head> элементы. В результате вставленные элементы могут не соответствовать исходной переданной строке.

  • В первом блоке кода ваш <html>, <head>, а также <body> метки удаляются, и <div class="bar"></div> остается. find только поиск внутри полученного <div> и не могу ничего найти.
  • Во втором блоке кода ваш <html>, <head>, а также <body> метки удаляются, и <div><div class="bar"></div></div> остается. find ищет внутри результата, и находит один <div>,

Что касается вашей второй части:

var code = $("<div id='foo'>1</div><div id='bar'>2</div>");
console.log(code.find('div'));

Сначала вы даете jQuery строку, которую он принимает и превращает в объект jQuery с двумя <div> "S. Затем, find поиски в каждом <div>, ничего не находит и не возвращает результатов.

Далее в

var code = $("<div id='foo'>1</div><div id='bar'>2</div>");
code.each(function() {
    alert( this.nodeName );
})

each перебирает объект jQuery, беря каждый из двух созданных <div> и предупреждает их имя узла. Таким образом, вы получаете два оповещения.

Источник

Ответ очень простой. когда вы создаете объект с использованием jQuery(html), тогда он создает иерархию узлов, а когда вы находите какой-то узел, например 'div', он выполняет поиск по всей иерархии, кроме корневых элементов, и в вашем первом примере у вас нет дочернего элемента 'div' узлы. А во втором примере у вас есть только один дочерний узел div.

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

var html= '<html><head></head><body><div class="bar"></div></body></html>';
console.log($('<div></div>').append(html).find('div'));

var html= '<html><head></head><body><div><div class="bar"></div></div></body></html>';
console.log($('<div></div>').append(html).find('div'));
Источник

Простой способ заключается в следующем:

Учитывая строку:

var html= '<html><head></head><body><div class="bar"></div></body></html>';

Найдите div с панелью классов:

$(html).filter('.bar')

Или все divs:

$(html).filter('div')

Возвращает объект с классом bar

Источник

.find в третьем примере выполняется поиск дочерних элементов в каждом сопоставленном элементе. Внутри вашего div с нет div дети (у них нет детей), так .find(anything) не вернет ни одного элемента.

.each с другой стороны, перебирает текущие элементы в наборе, который включает div s (есть два соответствующих элемента - div с).

Что касается <html> в вашем первом примере я не уверен - возможно, вам не разрешено создавать второй <html> элемент после загрузки страницы. $('<html><head></head><body><div class="bar"></div></body></html>'); только возвращает div так .find ничего не возвращает.

Источник
Другие вопросы по тегам