How do I filter the returned data from jQuery.ajax()?
The use of filter() vs. find() depends on the structure of your retrieved HTML page. For example, if this is the retrieved page:
<!DOCTYPE html><html><head> <title>Foo</title></head><body> <div id="wrap"> <div id="header"> <h1>Foo</h1> </div> <div id="body"> content </div> </div> <div id="tooltip"> tooltip </div></body></html> If you want to select the top-level elements = elements that are direct children of <body> - in this example: #wrap or #tooltip - then you have to use filter().
If you want to select other elements - in this example: #header, <h1>, #body, ... - then you have to use find().
I you don't know whether your element is a child of <body> or not, you could use this "hack":
$("<div>").html(data).find( selector );
By using this work-around, you always get the elements via find().
The jQuery.load method uses the following code:
// If successful, inject the HTML into all the matched elementsif ( status === "success" || status === "notmodified" ) { // See if a selector was specified self.html( selector ? // Create a dummy div to hold the results jQuery("<div />") // inject the contents of the document in, removing the scripts // to avoid any 'Permission Denied' errors in IE .append(res.responseText.replace(rscript, "")) // Locate the specified elements .find(selector) : // If not, just inject the full result res.responseText );}I.e it appends the full response to a DIV it creates, and then uses find(selector) on that.
So you should be looking at something like:
var foo = $('<div />').html(data).find('#foo'); // This looks like it'll work!Bit of a hack from jQuery's point of view!