使用 JQuery 导航无根 dom答案

【问题标题】：Navigate a rootless dom with JQuery使用 JQuery 导航无根 dom
【发布时间】：2017-01-19 16:00:14
【问题描述】：

给定这个 html 字符串：

var string = "<div></div><p></p>";

我用它创建了一个 jQuery 对象：

var dom = $(string);

有没有机会使用选择器来指向它的标签之一？当然，无需将其全部嵌入新创建的文件中。

dom.find("p");// []

【问题讨论】：

当然。当您有一个项目列表时，您通常希望将它们过滤到您想要的一个或多个项目。
.find(): "获取当前匹配元素集中每个元素的后代，由选择器、jQuery 对象或元素过滤。" vs. @987654322 @: "将匹配元素集减少为匹配选择器或通过函数测试的元素。"

标签： javascript jquery html dom

【解决方案1】：

当没有根元素时，您需要使用filter() 来获取顶级元素：

var string = "<div></div><p></p>";
var $dom = $(string).appendTo('body'); // appendTo() is only for purposes of this demo
$dom.filter("p").text('hello world!');

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案2】：

.find 查看元素内部。在您的情况下，尽管您正在创建一个 div 和一个并排的段落。将段落移动到div 中，您的代码就可以工作了。

或者您可以将这两个元素包装到第三个父元素中。

var string = "<div><p></p></div>";

var dom = $(string);

console.log(dom.find("p"));

【讨论】：

我猜 html 是有目的的，但是你的解决方案在遍历 dom 时会起作用
但他正在使用 .find，所以他不妨知道它的作用。 Rory 已经涵盖了 .filter 以防操作人员需要。

【解决方案3】：

var html = "<div></div><p></p>";
var parser = new DOMParser();
var dom = $(parser.parseFromString(html, "text/html"));

//work with dom
dom.find("p");

解析器将创建一个 html 文档（不附加到您的文档中）。

【讨论】：

【解决方案4】：

使用可能包含任何内容的 HTML sn-p 的更简单方法是使用临时父节点，然后使用/提取其子节点。

var $root = $('<div></div>').append(yourHtml);
$root.find('p').addClass('foo');// or whatever
$('.bar').append($root.contents());// put filtered content in your DOM; or
var filteredHtml = $root.html();// get it back to a string of markup

现在代码与内容的耦合更少，而且更灵活，因为您不必提前知道是否需要使用 filter()、find() 或两者。

【讨论】：