JQuery working wierdly for function 'find':
Question
I have the following jQuery line:
$('<html><a href="cnn.com">hi</a></html>').find('a')
I expect the result to be a wrapped set of one element. However the result is an empty array ( [] ). Why?
-- EDIT --
For some reason the code below works.
$('<html><div><a href="cnn.com">hi</a></div></html>').find('a');
Why is this happening?
3 answers
solution1
2 ACCPTED 2015-03-30 08:50:43
That's because the html element is stripped when the string is parsed:
> $('<html><a href="cnn.com">hi</a></html>')
[<a href="cnn.com">hi</a>]
ie the current collection contains an element that you are trying to find() . As the top-level a element doesn't (and can't ) have a descendants the find() call will return an empty collection.
From jQuery documentation :
When passing in complex HTML, some browsers may not generate a DOM that exactly replicates the HTML source provided. As mentioned, jQuery uses the browser's
.innerHTMLproperty to parse the passed HTML and insert it into the current document. During this process, some browsers filter out certain elements such as<html>,<title>, or<head>elements. As a result, the elements inserted may not be representative of the original string passed.
edit : The second snippet can find() a element as when the html element is stripped the top-level element of the collection is a div element that does have a descendant.
solution2
1 2015-03-30 08:45:19
As in the Documentation of .find() descriped
Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
$('<html><a href="cnn.com">hi</a></html>')
will just provide an Object of your a -tag.
If there are multiple anchor-tags inside your html-string you can filter them, eg:
var elem = $('<html><a href="cnn.com">hi</a><a href="cnn1.com">hi</a></html>');
var filter = elem.filter(function(){
return $(this).attr('href') === "cnn.com";
});
Edit
When passing in complex HTML, some browsers may not generate a DOM that exactly replicates the HTML source provided. As mentioned, jQuery uses the browser's .innerHTML property to parse the passed HTML and insert it into the current document. During this process, some browsers filter out certain elements such as
<html>,<title>, or<head>elements. As a result, the elements inserted may not be representative of the original string passed.
Source: http://api.jquery.com/jQuery/#jQuery2 down to the Paragraph Creating New Elements
So jQuery uses .innerHTML . According to the docs
Removes all of element's children, parses the content string and assigns the resulting nodes as children of the element.
So the html-string <html><a href="#">test</a></html> gets stripped to <a></a> . When wrapping a div around the anchor, the anchor stays a descendat of an elemnt and therefore gets found by the .find() -function.
solution3
-1 2015-03-30 08:45:18
You should read the documentation at Jquery docs about find()
$('html').find('a');
Check this jsfiddle
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.