The jquery filtering methods is used for the purpose for specifying the criteria, Those elements didn't matched with the criteria it will illuminate from the selection while the matched elements will be returned.
It has multiple methods like eq(index), slice(), filter(), has(), first() and last().
A brief introduction about all these methods are:-
1. eq(index) Method:-
This method returns an element with a specific index number of the selected elements, first index number is always "zero". it is also used for the purpose of reducing the set of matched elements to the specified index value.
$(document).ready(function(){
$("button").click(function(){
$("li").eq(2).css({"font-size":"40px", "color":"#fa4b2a", "background-color":"#ccc"});
})
});
2. slice() Method:-
Slice Method is used for setting the start and end time, It reduces the selecting range of elements by using the Start and end index value.
$("li").slice(1,6).css({"font-size":"40px", "color":"green"});
3. filter() and has() methods:-
These methods are used to define the specify a condition for example A user want to add attributes to the table in alternate rows so by using filter method it is easy to done by using the syntax.
$("li").filter(":even").css({"font-size":"40px", "color":"#fa4b2a"});
like that Has() Method is used for its decendants elements.
$("li").has("strong").css ({"font-family":"Verdana","color":"blue"});
Source Code:-
<!DOCTYPE html>
<html>
<head>
<title>Jquery Example : Jquery eq(index) Method </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("li").eq(0).css({"font-size":"40px", "color":"#fa4b2a", "background-color":"#ccc"});
$("li").slice(1,6).css({"font-size":"40px", "color":"green"});
$("li").filter(":even").css({"font-size":"40px", "background-color":"#ccc"});
$("li").has("strong").css ({"font-family":"Verdana",
"color":"blue"});
// Select list item with Index no 2, starting from 0
})
});
</script>
</head>
<body>
<h2>jquery Filter methods</h2>
<ul>
<li>The Doon school</li>
<li><strong>St. Joseph Academy</strong></li>
<li>Welham girls School</li>
<li>Welham boys School</li>
<li><strong>Brightlands school</strong></li>
<li>Asian School </li>
<li>Carman Residential School</li>
</ul>
<p>List of best schools in dehradun</p>
<button>Run jQuery Script</button>
</body>
</html>
0 Comment(s)