Both the methods are similar to each other.
It is hard to understand the difference between jQuery find() and filter() methods. The difference between the two is that find() method searches for all the elements in the selector while the filter() method searches for all the child elements.
find():-
Description-
In jQuery the .find() method get the descendent elements by passing through various level down the DOM. It is also known as traversal filtering.
Syntax-
- .find(selector)- Here in selector we put an expression with that element is matched. It describes which element to find.The selector may written in any CSS 1 to 3 syntax.
- .find(jQuery object)
- .find( element )
Example-
<html>
<head>
<title>Find method</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
// find the span element and add this css into it
$("ul").find("span").css({"color": "#ff3333", "border": "2px solid #1a0000"});
});
</script>
<style>
div{
width: 100%;
margin:0 auto;
}
li{
list-style: none;
padding: 10px 5px;
font-size: 20px;
}
</style>
</head>
<body>
<div>
<ul>
<li>The find() method<span>returns descendant elements of the selected element.</span></li>
<li>A descendant is a child, grandchild, great-grandchild, and so on.</li>
<li>To return all of the descendant elements, use the<span> "*" selector.</span></li>
</ul>
</div>
</body>
</html>
Here is the link of above code:-
filter():-
Description-
In jQuery the .filter() method get all the elements by passing through various level of DOM. It is also known as collection filtering
Syntax-
- .filter( selector )-Here in selector we put an expression with that element is matched. It specifies which HTML element to be selected.
- .filter( function(index) )
- .filter( element )
- .filter( jQuery object )
| $(selector).filter(criteria,function(index)) |
Example-
<html>
<head>
<title>filter method</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("li").filter(".filter").css({"color": "#ff3333", "border": "2px solid #1a0000"});
});
</script>
<style>
div{
width:100%;
margin: 0 auto;
}
li{
font-size: 20px;
padding: 10px 5px;
list-style: none;
}
</style>
</head>
<body>
<div>
<ul>
<li>The filter() method returns elements that match a certain criteria.</li>
<li>To specify multiple criteria, use comma.</li>
<li class = "filter">The filter() method is the opposite of the not() method.</li>
<li>The filter() method lets you specify a criteria.</li>
<li class = "filter"> The index position of the element in the set</li>
</ul>
</div>
</body>
</html>
Here is the link of the above code:-
0 Comment(s)