CODEWITHSUNDEEP
jqueryfindweb-crawler
Krishna Deepak
Krishna Deepak

Reputation: 1765

Difference between find and filter in jquery

I'm working on fetching data from wiki pages. I'm using a combination of php and jquery to do this. First I am using curl in php to fetch page contents and echoing the content. The filename is content.php:

$url = $_GET['url'];
$url = trim($url," ");
$url = urldecode($url);
$url = str_replace(" ","%20",$url);

echo "<a class='urlmax'>".$_GET['title']."</a>";
echo crawl($url);

Then jQuery is used to find the matched elements. 

$.get("content.php",{url:"http://en.wikipedia.org/w/index.php?action=render&title="+str_replace(" ","_",data[x]),title:str_replace(" ","_",data[x])},function(hdata){
                        var imgs = $(hdata).find('a.image img');
                        var ent = $(hdata).filter('a.urlmax');


                        ent = $(ent[0]).text();


});

I was able to successfully get images but for the variable ent when I use find instead of filter, it's returning an empty array. Only filter is working. Why is this?

Edit: I know the basic difference between find and filter. Here both the a.image img and a.urlmax are descendats of the hdata. Then why find does not work on a.urlmax. Not a.urlmax alone it's not working on any other class or id

Upvotes: 29

Views: 28258

Answers (3)

Mohamad Hamouday
Mohamad Hamouday

Reputation: 2753

.find()

It will returns descendant elements of the selected element.

Exemple (jsfiddle):

    <style>
      .Cell{
         margin: 15px;
         width: 400px;
         border: 2px solid lightgrey;
    
      }
      .Cell * {
         display: block;
         border: 2px solid lightgrey;
         color: lightgrey;
         padding: 5px;
         margin: 10px;
    }
    </style>

    <div class='Cell Plus'>div (1)
      <div class='Plus'>Child</div>
    </div>
    
    <div class='Cell Plus'>div (2)
      <div class='Plus'>Child</div>
    </div>

JS:

$(".Cell").find(".Plus").css({"color": "red", "border": "2px solid red"});

Result:

enter image description here

.filter()

It will returns elements that match a certain criteria.

Using the same html above:

$(".Cell").filter(".Plus").css({"color": "red", "border": "2px solid red"});

Result:

Filter result

Upvotes: 4

mprabhat
mprabhat

Reputation: 20323

filter will select subset of element from the selected element

find will select descendent/children of selected element

To make it more clear filter will search through all element whereas find will search only in the descendent list

Upvotes: 23

Jere
Jere

Reputation: 3397

.find() http://api.jquery.com/find/

Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

Filter, on the other hand, works on the currently matched elements. That's why filter worked but find did not (you needed to look at the current element).

Upvotes: 34

Related Questions