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

Leave a Comment