如何在不插入DOM的情况下对文本字符串使用jQuery selector/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文档

过滤:

提供的选择器针对每个元素进行测试; 匹配选择器的所有元素都将包含在结果中.

找:

.find()方法允许我们在DOM树中搜索这些元素的后代,并从匹配元素构造一个新的jQuery对象.

使用你的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);