What is the difference between find and filter from jQuery?

Difference

• find finds the elements that meet the requested expression that are descendants of the selector.

• filter, on the other hand, it filters and returns all elements that match the selector and also the filtered expression.

Example

In the example below, a $('div').filter('.teste') will find the Block 1 and the Sub 3, since both are divs that meet the filter by class teste.

In turn, a $('div').find('.teste') will find only the Sub 3, since only within the selector div of "Block 2" is a descendant whose class is teste.

<div class="teste">
   Bloco 1
   <div class="limao">Sub 1</div>
   <div class="trevo">Sub 2</div>
</div>

<div class="pardo">
   Bloco 2
   <div class="teste">Sub 3</div>
   <div class="peixe">Sub 4</div>
</div>

Click here to see an example in jsfiddle.

The function of find is to fetch elements descending from the selected one(s), while the function of the filter is to create a subset of the elements themselves. Example:

<div id="div1" class="a top">
  <div id="sub1" class="b"></div>
  <div id="sub2" class="b"></div>
  <div>
      <div id="sub3" class="b"></div>
  </div>
</div>
<div class="b top"></div>
<div class="b top"></div>
<div id="div2" class="a top"></div>
<div id="div3" class="a top"></div>

The following code catches sub1, sub2 e sub3:

$("#div1").find(".b");

Already the following code catches div1, div2 e div3:

$(".top").filter(".a");

An alternative way to invoke filter is to pass a function as an argument instead of a selector. This allows you to run some more complicated logic when choosing whether or not a particular element will enter the requested subset:

$(".top").filter(function(indice) {
    var elemento = this, $elemento = $(this);
    return ...; // Se true, o elemento entra no resultado.
});

Easy-to-understand summary using examples:

$('div a') returns the same as $('div').find('a')

$('body .teste strong') returns the same as $('body').find('.teste').find('strong')

$('.minhaClasse span') returns the same as $('.minhaClasse').find('span')

$('.foo .bar') returns the same as $('.foo').find('.bar')

$('div:gt(0)') returns the same as $('div').filter(':gt(0)')

$('div:hidden') returns the same as $('div').filter(':hidden')

$('div[data-teste]') returns the same as $('div').filter('[data-teste]')

$('a[title]') returns the same as $('a').filter('[title]')

$('option:selected') returns the same as $('option').filter(':selected')

$('.foo.bar') returns same as $('.foo').filter('.bar')

Did you notice the difference?

The filter method reduces the current selector according to a filter, such as an attribute (href, name, value, src, data-*, for, maxlength, action, etc.), a pseudo class (: hidden,: visible,: hover,: active,: checked,: selected,: empty, etc), among others.

The find method serves to find descendant elements of the specified selector(s).

find searches for nodes within an element, while filter filters the selected nodes with another selector.

$('div').find('p') searches for paragraphs within div's, while $('div').filter('.a') selects only div's with CSS class "a".