Can I use jQuery selectors on an HTML string that is not attached to the DOM?_问答_开发者

Can I use jQuery selectors on an HTML string that is not attached to the DOM?

开发者 https://www.devze.com 2023-01-28 05:14 出处：网络

So if I have a variable like var ht = \"<body>开发者_高级运维;<p>Paragraph Here</p></body>\"

相关专题：jquery

So if I have a variable like

var ht = "<body>开发者_高级运维;<p>Paragraph Here</p></body>"

If it was attached to the DOM I could just do this to get the text

$('p').text();

But can I do the same kind of selection just on a variable that has not yet been attached to the dom?

The jQuery object will take HTML and make it in to a DOM structure for further query, you can pass it in directly to create the object, or use it as a context if you just wish to query it.

Edit: For some reason it seems necessary to wrap it in a DIV, if not already within one in this example. See the jQuery object documentation on this method for further information.

See test framework for system at: http://jsfiddle.net/hUMqU/

var ht = "<body><p>Paragraph Here</p></body>";
$('<div>' + ht + '</div>').find('p').text();

or as context:

var ht = "<body><p>Paragraph Here</p></body>";
$('p', '<div>' + ht + '</div>').text();

There is no mystery. Selecting

$('p')

selects p elements of the document, the implied context.

But the p elements in:

var ht = "<body><p>Paragraph Here</p></body>";

are not attached to the document (DOM) so it's OK if they are not selected.

Fortunately the $() function has a second argument, the context, that has to be used here, like:

$('p', $(ht).context)

Just wrap your HTML String into a jQuery object, and then you can run your jQuery selectors from there:

var htmlString = "<body><p>Paragraph Here</p></body>";
var elements = $(htmlString);

var p = elements.filter('p').text();
console.log(p);
//=> Paragraph Here

Working demo here.