I remembered that there is a function in jQuery called filter . I already know find , but I want to know if there is any difference between them or if they are the same thing.
What is the difference between the find and filter of jQuery?
17
asked by anonymous 05.02.2014 / 00:53
4 answers
13
Difference
-
findfinds the elements that match the requested expression that are descendants of the selector. -
Example
In the example below, a filter will find Block 1 and Sub 3 , since both are $('div').filter('.teste') s that meet the filter by class div .
In turn, a teste will only find Sub 3 , as only within the $('div').find('.teste') selector of "Block 2" there is a descendant whose class is div .
<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 a example in JSFiddle .
05.02.2014 / 01:00
6
The function of find is to fetch descendants elements from those selected (s) ), while 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 takes sub1 , sub2 and sub3 :
$("#div1").find(".b");
Already the following code takes div1 , div2 and div3 :
$(".top").filter(".a");
An alternate way of invoking filter is passing a function as an argument instead of a selector. This allows you to perform some more complicated logic when choosing whether or not a given element will join the requested subset:
$(".top").filter(function(indice) {
var elemento = this, $elemento = $(this);
return ...; // Se true, o elemento entra no resultado.
});
05.02.2014 / 01:01
4
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')
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 pseudoclasse (: : visible,: hover,: active,: checked,: selected,: empty, etc), among others.
The find method is used to find descending elements of the specified selector (s).
05.02.2014 / 01:22
3
The find looks for nodes within an element, while filter filters the selected nodes with another selector.
$('div').find('p') looks for paragraphs within div's, while $('div').filter('.a') only selects div's with the CSS class "a".
05.02.2014 / 01:01