What is the difference between filter() and find() in jQuery?

jQueryWeb DevelopmentFront End Technology

jQuery filter() method

The jQuery filter() method will return elements matching a specific criteria.

Example

You can try to run the following code to learn how to work with jQuery.filter() method,

Live Demo

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $("p").filter(".myclass").css("background-color", "gray");
  });
</script>
</head>
<body>

<h1>Tutorialspoint</h1>

<p class="myclass">Free Text Tutorials</p>
<p>Free Video Tutorials</p>
<p>Connecting Tutors</p>

</body>
</html>

jQuery find() method

The jQuery.find() method will return the descendant elements of the selected element.

Example

You can try to run the following code to learn how to work with jQuery.find() method,

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
 .myclass * {
    display: block;
    border: 2px solid red;
    padding: 2px;
    margin: 10px;
    color: red;
 }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
 $(document).ready(function(){
    $("ol").find("span").css({"background-color": "blue", "border": "5px solid yellow"});
 });
</script>
</head>

<body class="myclass">body
  <div style="width:500px;">div
    <ol>ol  
      <li>li
        <span>The descendant element</span>
      </li>
    </ol>  
  </div>
</body>

</html>
raja
Published on 16-Dec-2017 09:32:03
Advertisements