CODEWITHSUNDEEP
javascriptjquery
Elad Katz
Elad Katz

Reputation: 7591

JQuery working wierdly for function 'find':

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?

Upvotes: 3

Views: 74

Answers (3)

empiric
empiric

Reputation: 7878

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.

Demo

If there are multiple anchor-tags inside your html-string you can filter them, e.g.:

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";
});

Demo

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.

Upvotes: 1

Ram
Ram

Reputation: 144689

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>​]

i.e. 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 .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.

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.

Upvotes: 2

0aslam0
0aslam0

Reputation: 1963

You should read the documentation at Jquery docs about find()

$('html').find('a');

Check this jsfiddle

Upvotes: -1

Related Questions