Difference between find and filter in jquery

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

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

.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:

---

.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: