update cy.filter examples

docs/commands/traversal.md

@@ -248,7 +248,9 @@ cy.get('#animals li')
 
 <!-- fiddle-end -->
 
-Watch the video [Use cy.filter For Complex Element Filtering](https://youtu.be/AO9iPIg9yKk). Find another example in the recipe [Computed style](../recipes/computed-style.md) for example. Learn how to find input elements by their current value in the recipe [Input value](../recipes/input-value.md).
+Watch the video [Use cy.filter For Complex Element Filtering](https://youtu.be/AO9iPIg9yKk).
+
+Find more filtering examples in the recipes [Computed style](../recipes/computed-style.md) and [Filter elements](../recipes/filter-elements.md). Learn how to find input elements by their current value in the recipe [Input value](../recipes/input-value.md).
 
 ### Skip an element with certain text
 

docs/recipes/filter-elements.md

@@ -99,4 +99,16 @@ cy.get('li')
   .and('include.text', 'Pears')
 ```
 
+We can write custom filtering logic by passing a callback to `cy.filter(callback)` command. For example, let's only select elements with the text starting with the letter "k".
+
+```js
+cy.get('li')
+  // cy.filter(callback) where the callback
+  // receives the index and the element reference
+  .filter((k, el) => {
+    return el.innerText.toLowerCase()[0] === 'k'
+  })
+  .should('have.text', 'Kiwi')
+```
+
 <!-- fiddle.end -->

docs/recipes/find-by-class-or-text.md

@@ -202,4 +202,22 @@ cy.get('div')
   .and('have.class', 'target')
 ```
 
+You can simplify the logic above using [cy.filter](https://on.cypress.io/filter) query command with callback function argument. Instead of `cy.then + cy.filter`, simply use the `cy.filter(callback)`:
+
+```js
+// filter elements using cy.filter
+cy.get('div')
+  .should('have.length.gt', 1)
+  .filter((k, el) => {
+    // if the found element is inside <UL> element
+    // then reject it by returning false
+    const $ul = Cypress.$(el).closest('ul')
+    return $ul.length === 0
+  })
+  // finds only the elements outside the <UL> element
+  .should('have.length', 2)
+  // check by confirming the class on each found element
+  .and('have.class', 'target')
+```
+
 <!-- fiddle-end -->