Выбор созданного HTML с помощью jQuery

Question

Почему это не работает?

var string = '<b>Hello</b> this is just a <b>test</b>';
console.log($(string).find('b'));

Я ожидаю, что консоль Firebug выдаст мне два <b> элемента, но вместо этого я получу пустой массив.

Однако, если я изменю это на:

var string = '<b>Hello</b> this is just a <b>test</b>';
console.log($('<div/>').html(string).find('b'));

Он делает то, что я хочу. Я понимаю, что jQuery внутренне присваивает переданный HTML, который он не может обработать с помощью createElement, элементу <div>, чтобы проанализировать его в структуре DOM, но не должен найти элементы в этом переданном HTML, как я пытался выше? Чтобы еще больше сбить с толку, иногда я вижу людей, успешно использующих первый синтаксис, когда они возвращают (а иногда искажают) HTML из запроса AJAX, но мне кажется, что это никогда не работает без добавления моего HTML-кода в <div>

Что мне не хватает?

Answer 1

В вашей первой версии объект jQuery содержит три узла - тег b, текстовый узел и второй тег b.

Когда вы вызываете find, он ищет в children этих трех узлов теги b. Поскольку ни один из трех узлов не имеет дочерних элементов, он ничего не находит.

Ваша вторая версия создает один тег div с этими тремя узлами внутри. Когда вы вызываете find, он ищет дочерние теги div для тегов b, которые он находит.

Если вы позвоните filter вместо find, он будет искать узлы в наборе. Однако он не найдет теги b, вложенные в другие узлы в наборе.

Answer 2

Кажется, что когда вы создаете элемент с помощью только $ (string), этот jQuery создает объект jQuery, который фактически содержит три элемента DOM: первый жирный тег, текстовый узел и второй жирный тег , В этот момент, когда вы вызываете .find для этого, он смотрит внутрь каждого из них - и вложенных жирных шлейфов не происходит, поэтому он ничего не находит.

В некотором смысле, он действительно делает именно то, что вы просите - вы фактически даете ему три части DOM, и он разбирает их на это, а затем вызывает find для каждого из них вместо некоторой родительской структуры. :)

Но затем, помещая все это в родительский div и ища родительский, вы находите то, что ищете.

Действительно, завернуть все в div - это самый безопасный способ работы с кросс-браузерной системой.