What’s different from jQuery’s find and filter?

Question

I remembered that there is a function in jQuery called filter. I already know the find, but I want to know if there’s any difference between them or if they’re the same thing.

Answer 1

Difference

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

• filter, on the other hand, filter and return all elements matching 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, for both are divs serving the filter by the class teste.

In turn, a $('div').find('.teste') will find only the Sub 3, for only inside the dial div of "Block 2" there 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 one example in Jsfiddle.

Answer 2

The function of find is to seek elements descendants of that selected(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 picks up sub1, sub2 and sub3:

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

Already the following code picks up div1, div2 and div3:

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

An alternative way to invoke the filter is passing a function as argument instead of a selector. This allows you to perform some more complicated logic by 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.
});

Answer 3

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 the same as $('.foo').filter('.bar')

---

Realized the difference?

The method filter reduces the current selector according to a filter, such as an attribute (href, name, value, src, data-*, for, maxlength, action, etc.), a pseudoclass (:Hidden, :Visible, :Hover, :active, :checked, :Selected, :Empty, etc.), among others.

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

Answer 4

The find seeks us within an element, while the filter filters selected nodes with another selector.

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