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

admin管理员组

文章数量:1279084

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:

And:

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.

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:

And:

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.

• javascript
• jquery

Share Improve this question Follow edited Jun 26, 2016 at 4:02 Can Poyrazoğlu asked Jun 26, 2016 at 3:24 Can PoyrazoğluCan Poyrazoğlu 34.8k5454 gold badges206206 silver badges423423 bronze badges 8

• If I'm reading this correctly, I think it's because the "result" is not yet part of the DOM. It hasn't been bound to anything. – WonderGrub Commented Jun 26, 2016 at 3:28
• @WonderGrub yes it's not added to DOM, and I can't add it to DOM as I need to grab only the element with that ID, and replace an element that already exists on the DOM with the same ID. I don't think it's a good idea to have two elements with the same ID simultaneously in the DOM. – Can Poyrazoğlu Commented Jun 26, 2016 at 3:32
• Is result an entire document? – guest271314 Commented Jun 26, 2016 at 3:53
• @guest271314 no, it's just part of a document – Can Poyrazoğlu Commented Jun 26, 2016 at 3:54
• Can you reproduce at plnkr plnkr.co or jsfiddle jsfiddle? – guest271314 Commented Jun 26, 2016 at 3:55

 |  Show 3 more ments

4 Answers 4

Sorted by: Reset to default 6

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.

But, if you use find, it'll return nothing i.e. empty array since there is no element #container inside #container.

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

Your code is equivalent to this ^^^.

---

If you want, you can use filter. filter will go through each element and check if this matches the selector, if it then the element is added to the result set.

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

This'll give you plete element.

It seems to be a design decision with jQuery. Top-level elements in an AJAX result are not queried correctly with find. Interesting.

I've solved my problem with a workaround by creating a dummy div element, encapsulating my result inside that element, and then querying that dummy element. It worked:

var t = $("<div>")
t.append(result);
t.find("#UsersAndRolesResults"); //this one returned my object correctly

For a simple example, try:

$('<div id="target"></div>').find("#target");

You will get 0 results.

Try:

$('<div><div id="target"></div></div>').find("#target")

And you'll get the correct result.

Try this:

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

Given

console.log($("<div id=target></div>").find("#target"));

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

.length would be 0 as expected.

---

You can use .closest() to search for both child elements and original jQuery object selector

console.log($("<div id=target></div>").closest("#target"));

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

本文标签： javascriptjQuery find not working in toplevel elements if not added to DOMStack Overflow