Take the 2-minute tour ×

When using the jQuery.ajax method, I am struggling to filter the data that is returned to get exactly what I need. I know this is easy using .load and probably the other jQuery ajax methods but I need to use .ajax specifically.

For example I know that this works;

var title = $(data).filter('title'); // Returns the page title

But what if I just want the contents of a div with id="foo"?

var foo = $(data).filter('#foo'); // None of these work
var foo = $(data).find('#foo');   //
var foo = $('#foo', data);        //

Ideally, I want one method into which I can pass a normal jQuery selector, which will work for selecting titles, divs, or any other element that jQuery can select. This is so that I can pass in any string into my own ajax function - eg;

    url: 'myPage.html',
    filterTitle: 'title',
    filterContent: '#main-content'

Any help would be greatly appreciated.

share|improve this question
Either $(data).find('#foo'); or $(data).filter('#foo'); must work. There is no way that none of those two work. Are you sure that you have a #foo element on the retrieved page? –  Šime Vidas Nov 22 '10 at 12:10
They both seem to return an empty object. When using Chrome to watch the variable foo, it is shown as Object[0] and expanding it reveals context: undefined and length: 0. This is true for 'find' and 'filter'. Logging foo.html() returns null. –  smix96 Nov 22 '10 at 12:16
that object is not empty at all. Please see my answer for a working sample. –  Lorenzo Nov 22 '10 at 12:19
Sorry, yes I'm sure there's the relevant element in the page. It's actually '.ops_datagrid' but I'm sure. There is another property under Object[0] called prevObject. It is an array containg 'Comment', 'Text', HTMLMetaElement', 'Text', 'HTMLTitleElement', 'Text', 'HTMLDivElement', 'Text', 'HTMLParagraphElement' etc... –  smix96 Nov 22 '10 at 12:21
The first div element has a property textContent '.ops_datagrid' –  smix96 Nov 22 '10 at 12:21
add comment

4 Answers

up vote 9 down vote accepted

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>



    <div id="wrap">
        <div id="header">
        <div id="body"> content </div>
    <div id="tooltip"> tooltip </div>


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().

share|improve this answer
Brilliant that works perfectly. Thank you very much indeed. –  smix96 Nov 22 '10 at 12:50
For anyone else, Matts answer below explains the same method in a different way if it helps –  smix96 Nov 22 '10 at 12:52
Thanks for this post, works weel. Just a minor detail, you might want to use $('<div/>') instead of $('<div>') just to be on safe side. –  Dan Doyon Mar 14 '11 at 18:47
@Dan I believe $('<div>') is safe. If you pass in a single tag into the $ fuction, like so: $('<foo>'), jQuery will execute this: document.createElement('foo'). –  Šime Vidas Mar 14 '11 at 19:28
add comment

The jQuery.load method uses the following code:

if ( status === "success" || status === "notmodified" ) {
  // See if a selector was specified
  self.html( selector ?
    // Create a dummy div to hold the results
    jQuery("<div />")
      // 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!

share|improve this answer
That's great, thank you. I've given top answer to Sime Vidas above simply because he got there first. The extra info is appreciated though. –  smix96 Nov 22 '10 at 12:51
add comment



I am using this to filter the result of an ajax call that return an HTML conent

share|improve this answer
This just returns an empty string. –  smix96 Nov 22 '10 at 12:26
This works very well in my case. You did not posted any detail on your markup sample... –  Lorenzo Nov 22 '10 at 13:20
add comment

If you don't need any special functionality given by the full $.ajax method, you should give $.load() a try:

The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.

$('#result').load('ajax/test.html #container');


share|improve this answer
add comment

Your Answer


