Can Poyrazoğlu Can Poyrazoğlu - 5 months ago 13
jQuery Question

jQuery find not working in top-level elements if not added to DOM

I'm loading some HTML with jQuery asynchronously:

$.get(path, {}, function (data) {
var result = $(data);
var resultSelector = result.find(selector);
});


result
is a valid HTML that contains my selector (in my specific case,
"#UsersAndRolesResults"
).

I can see that it contains when I simply type
result
into the console, it's there exactly with the same ID, no typos or anything.

However,
result.find(selector)
returns 0 elements.

In my specific example, this is
result
:

enter image description here

And:

enter image description here

Why?

UPDATE: I can query for other elements that are inside
#UsersAndRolesResults
with their ID tag and they are returned correctly
. I also cannot query any other top-level elements in the result. I think there is an issue with querying top-level elements inside the result.

UPDATE 2: Just try
$('<div id="target"></div>').find("#target")
and you will get 0 results, where you should obviously get the
div
.

Answer

No. This is not bug, this is behavior defined in jQuery.

find() is used to select the elements which are inside the element on which find is called. In your case, the element is not children of the selector, so find will not work.

Example:

<div id="container">
    <div class="message">Hello World!</div>
    <div>Bye World</div>
</div>

JavaScript:

$('#container').find('.message');

This will select the element having class message and which is inside the element having ID container.


If you want, you can use filter.

$('#container').filter('#container');

This'll give you complete element.

Comments