jQuery API provides traversing methods to filter out the matched elements. We will discuss some filtering methods in this post, jQuery has(), not() and filter().
jQuery has()
The has() method returns all the elements which matches at least one of the elements passed to this method. The has() method accepts a mandatory parameter which reduces the matched set of elements..
Here is the general syntax for using has():
element could be any selector expression to match against or any DOM element. You can pass multiple comma separated elements this methods like $(“div”).has(“p,span”). Here has() method return all the div elements which contains any of the elements, that is p or span element.
jQuery has() example
Following example demonstrates the jQuery has() usage.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!doctype html> <html> <head> <title>jQuery Traversing has</title> <style> div{ display: block; border: 3px solid grey; color: black; padding: 5px; margin: 25px; width:250px; text-align:center; color:red; } p{ color: green; text-align:center; } </style> <script src="https://code.jquery.com/jquery-2.1.1.js"></script> </head> <body> <h2>jQuery has() Demo</h2> <div><b>This div has a p element</b> <p><b>p - I am inside div</b></p> </div> <div><b>I'm not yellow because I don't have a p element</b></div> <script> $(document).ready(function(){ $("div").has("p").css("background-color","yellow"); }); </script> </body> </html> |
In this example, we have two div elements. We are going to check whether the div elements have a p element using jQuery has().
$("div").has("p") checks whether the div has a p element. The has() method traverses the DOM tree and finds two div elements but only one has the p. Therefore, the div which contains p will be filled with yellow.
In this example you can see that the has() method filters out the div elements using the selector passed to this method, that is a p element. Below is the output produced by above HTML page.
Now we can look in to jQuery not(), another useful filtering method .
jQuery not()
The not() method filters out all the elements which matches the specified selector from the matched set of elements.
Here is the general syntax for using not():
element could be a string containing the selector expression, a function, any DOM element or any existing jQuery object.
jQuery not() example
Following example demonstrates the jQuery not() usage
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!doctype html> <html> <head> <title>jQuery traversing not</title> <style> div { width: 50px; height: 50px; margin: 10px; float: left; background: yellow; border: 2px solid white; } .green { background: green; } } </style> <script src="https://code.jquery.com/jquery-2.1.1.js"></script> </head> <body> <div></div> <div class="green"></div> <div></div> <script> $( "div" ).not( ".green" ) .css( "border-color", "red" ); </script> </body> </html> |
In this example, we have three div elements and two of them is defined with CSS style class="green".
$( "div" ).not( ".green" ).css( "border-color", "red" ); This line of code filters out the div elements which does not have class="green" and changes the border color to red.
Now we can look in to jQuery filter(), another useful filtering method .
jQuery filter()
The filter() method removes all the elements from the matched set of elements that do not match the specified selectors.
Here is the general syntax for using filter():
element could be a string containing the selector expression, a function, any DOM element or any existing jQuery object.
jQuery filter() example
Following example demonstrates the jQuery filter() usage
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!doctype html> <html> <head> <title>jQuery traversing filter</title> <style> div,.newDivClass{ width: 50px; height: 50px; margin: 10px; float: left; background: yellow; border: 2px solid white; } } </style> <script src="https://code.jquery.com/jquery-2.1.1.js"></script> </head> <body> <div></div> <div class="newDivClass"></div> <div></div> <script> $( "div" ) .css( "background", "yellow" ) .filter( ".newDivClass" ) .css( "border-color", "red" ); </script> </body> </html> |
In this example, we have three div elements and one of them is defined with CSS style class="newDivClass".
First we change the back ground color of all the div elements to yellow and changes the border color of the div element which has clas==”newDivClass” using filter() method.
I hope you have understood the use of these filtering methods in jQuery. We will discuss other methods in the coming posts.