javascript - 如何在不插入 DOM 的情况下对文本字符串使用 jQuery 选择器/find()？

Question

我有一个文本字符串，我正在尝试使用 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 

谢谢。

Answer 1

您想使用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 文档

过滤器:

The supplied selector is tested against each element; all elements matching the selector will be included in the result.

查找:

the .find() method allows us to search through the descendants of these elements in the DOM tree and construct a new jQuery object from the matching elements.

对于您的 html 片段，没有包装元素，因此没有后代，因此 find() 不起作用。

你基本上在做:

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

如果您希望 find 与 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);