Использование 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/

Ответы

Ответ 1

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

Во-первых:

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() docs:

При передаче сложного HTML некоторые браузеры не могут генерировать DOM что точно реплицирует предоставленный HTML-источник. Как уже упоминалось, мы используем свойство browser.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>. Затем find выполняет поиск в каждом <div>, ничего не находит и не возвращает никаких результатов.

Далее, в

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

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

Ответ 2

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

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

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'));

Ответ 3

.find в третьем примере, поиск детей в каждом совпадающем элементе. Внутри div нет детей div (у них нет детей), поэтому .find(anything) не будет возвращать какой-либо элемент.

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

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

Ответ 4

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

С учетом строки:

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

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

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

Или все divs:

$(html).filter('div')

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