Question

给出这个html字符串：

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

我用它创建一个jQuery对象：

var dom = $(string);

有没有机会使用选择器指向其中一个标签？当然，没有将它全部嵌入到新创建的中。

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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()或两者都使用。

使用JQuery导航无根dom

4 个答案: