2

I am new to jquery and I am having a problem understanding the Jquery.find() method. I have been reading other responses but I feel like I am still missing something.

I am doing an ajax call and getting a html return.

<!DOCTYPE html> 
<head><title></title></head>
<body>
<form name="CALC"><table>....</table></form>
</body>
</html>

Then I do a

$(data).find('table');

and everything works as expected however when I do a similar ajax call and get the following html

<!DOCTYPE html> 
<head><title></title></head>
<body>
<div class="paraSearch">.....</div>       
</body>

Then I do a

$(data).find('.paraSearch');

I do not receive the div object. Instead the div I am looking for is in the prevObject array. However what does work is if I call:

$(data).closest('.paraSearch');

I understand that find() can return an array because it can select multiple elements. But then why does the first version work?

Thanks for the explanation!

UPDATE

Just to clarify my issue problem is that when I try to append the file that has the ajax call with so:

var content = $( data).find( '.paraSearch' );
$(sectionName).append(content);

Nothing is added.

Community
  • 1
  • 1
user2409721
  • 25
  • 3
  • .find() is looking for descendants when .closest() is looking for ancestor (the first one corresponding to selector passed as closest function param). So it's quite hard to understand what you are looking for – A. Wolff May 22 '13 at 13:47

2 Answers2

3

find() searches the descendants of the element you call it on for what you're looking for.

closest() searches the ancestors of the element you call it on for what you're looking for.

Basically, find traverses the tree down and closest traverses the tree up.

Tyanna
  • 719
  • 6
  • 11
  • First thanks for the super fast response. However I am still missing why is a descendant of $(data) and
    an ancestor of $(data). Shouldn't I be able to find both using either method?
     – user2409721 May 22 '13 at 13:57
  • `$(data)` will return a jquery object scoped on the root element, so you are finding FROM that one – David Fregoli May 22 '13 at 14:02
  • AH David Fregoli! So you mean I am finding from
    so it obviously cant find it! Makes awesome sense thank you so much!
     – user2409721 May 22 '13 at 14:04
  • @user2409721 not really, just open the console here and paste `$('
    ....
     – David Fregoli May 22 '13 at 14:06
1

When using the find method on HTML in a string, certain tags are stripped out. From the docs:

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.

Consequently, in your case, the search is starting with the first child in the body. In the first case it's the form, so find() function works by finding descendants of that element (as others have mentioned). However, in the second case, the DIV of class 'paraSearch' is the starting element, and it cannot be a descendant of itself, so find() does not find it. The closest() function however, would find it, as it tests the element itself first. From the docs:

.closest( selector ) Description: For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

You can check this by placing a parent DIV to the 'paraSearch' DIV in the second example, and then find() will work.

For more details check out this thread: Using jQuery to search a string of HTML

Community
  • 1
  • 1
MasNotsram
  • 2,105
  • 18
  • 28