Как использовать jQuery selector/find() для текстовой строки без вставки в DOM?

У меня есть текстовая строка, я пытаюсь выбрать отрезки с помощью jQuery. Я хотел бы получить пролеты без добавления элемента в dom - если это возможно?

После прочтения документации jquery у меня возникло предположение, что я могу создать фрагмент, обернув строку в тег селектора jquery, а затем с помощью.find() найти нужные элементы.

У меня есть код, который похож на это, но судя по последней строчке, очевидно, что никакие пролеты не выбираются; любая помощь будет принята с благодарностью:

// 'text' is normally generated automatically... 
// just made it an escaped string for example purposes.
var text ="<span id=\"blah1\">Y</span><br/><span id=\"blah2\">o</span><br/>";
var spans = $(text).find('span');
console.log(text); // => <span id="blah1">Y</span><br/><span id="blah2">o</span><br/>
console.log(spans.length); // => 0 

Благодарю.

2 ответа

Решение

Вы хотите использовать filter() не find()

var text ="<span id=\"blah1\">Y</span><br/><span id=\"blah2\">o</span><br/>";
var spans = $(text).filter('span');
console.log(spans.length);

jsFiddle

Из документов JQuery

фильтр:

Поставляемый селектор проверяется по каждому элементу; все элементы, соответствующие селектору, будут включены в результат.

находить:

метод.find() позволяет нам искать потомков этих элементов в дереве DOM и создавать новый объект jQuery из соответствующих элементов.

в вашем html-фрагменте нет элемента-оболочки, поэтому нет потомков, поэтому find () не работает.

Вы в основном делаете:

var elems = jQuery("<span id=\"blah1\">Y</span>").add("<br/>").add("<span id=\"blah2\">o</span>").add("<br/>");

Если вы хотите найти для работы с find(), вам нужно обернуть его в элемент.

var text ="<span id=\"blah1\">Y</span><br/><span id=\"blah2\">o</span><br/>"; 
var spans = jQuery("<div></div>").append(text).find("span");
console.log(spans.length);

Вы хотите использовать filter в этом случае:

var text ="<span id=\"blah1\">Y</span><br/><span id=\"blah2\">o</span><br/>";
var spans = $(text).filter('span');
console.log(spans.length); // 2

Демо: http://jsfiddle.net/ambiguous/TGY3J/

Или заверните это в <div> и использовать find:

var text ="<span id=\"blah1\">Y</span><br/><span id=\"blah2\">o</span><br/>";
var spans = $('<div>' + text + '</div>').find('span');
console.log(spans.length); // 2

Демо: http://jsfiddle.net/ambiguous/qbCjk/

find работает на потомков, но без <div> фантик, твой $(text) не имеет <span> потомки. Оборачивая ваш HTML в <div> это, вероятно, ваш лучший выбор, так что вам не нужно беспокоиться о глубине желаемых элементов.

Другие вопросы по тегам