导航与jQuery一个无根的DOM

Question

鉴于这种HTML字符串：

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

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

var dom = $(string);

是否有机会使用选择指向它的标签之一？如果不将它嵌入所有新创建的一个，当然。

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

Answer 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!');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

.find外观元素的内部。你的情况虽然你正在创建一个div和彼此相邻段落。移动div里面的段落，你的代码将工作。

或者，你可以用这两个元素到第三，父母。

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

var dom = $(string);

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

Answer 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文件（不附加您的文档）。

Answer 4

一个更简单的用HTML代码段可能包含任何工作的方法是使用临时父节点，然后用/解压缩它的孩子。

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()或两者兼而有之。