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

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

31 голосов
/ 23 августа 2011

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

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 ]

38 голосов
/ 23 августа 2011

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

Первая: 

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.Как уже упоминалось, мы используем свойство браузера .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> и оповещает их имя узла.Таким образом, вы получаете два оповещения.

16 голосов
/ 23 августа 2011

ответ очень прост. когда вы создаете объект с использованием 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'));
4 голосов
/ 12 января 2017

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

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

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

Поиск div с панелью классов: 

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

Или все дивы: 

$(html).filter('div')

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

2 голосов
/ 23 августа 2011

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

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

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

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

Нет похожих вопросов

...