jQuery Filtering:
When we have to select a specific element out of various given elements filtering is required.
In Jquery there are some filtering methods divided into two groups:
1. Methods that select a specific element based on its position in a group of elements, such as first(), last() and eq().
2. Methods that select elements that match, or do not match, a certain criteria, such as filter() and not().
Methods that select a specific element based on its position in a group of elements:
1. first():
This method is used to select the first element among the group of elements.
Example:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div p").first().css("background-color", "yellow");
});
</script>
</head>
<body>
<h1>Welcome </h1>
<div style="border: 1px solid black;">
<p>First Line</p>
<p>Last Line</p>
</div>
</body>
</html>
In this example the first p tag gets selected (i.e the background color of the first line gets yellow).
2. last():
This method is used to select the last element among the group of elements.
Example:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div p").last().css("background-color", "yellow");
});
</script>
</head>
<body>
<h1>Welcome </h1>
<div style="border: 1px solid black;">
<p>First Line</p>
<p>Last Line</p>
</div>
</body>
</html>
In this example the last p tag gets selected (i.e the background color of the last line gets yellow).
3. eq():
This method is used to select an element at a specific index. In this we provide the index number of the element to be selected.
Example:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").eq(1).css("background-color", "yellow");
});
</script>
</head>
<body>
<h1>Welcome </h1>
<p>First</p>
<p>Second</p>
<p>Third</p>
<p>Fourth</p>
</body>
</html>
In this example the second p tag gets selected (i.e the background color of the second line gets yellow).
Note:-> As the index starts from zero therefore the first element will be at index 0.
Methods that select elements that match, or do not match, a certain criteria:
1. filter():
This method is used to select the element or elements that fullfill (match) the given creteria.
Example:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").filter(".intro").css("background-color", "yellow");
});
</script>
</head>
<body>
<h1>Welcome</h1>
<p class="intro">First</p>
<p class="intro">Second</p>
<p>Third</p>
<p>Fourth</p>
</body>
</html>
In this example the first two lines gets selected as they contain the class name='intro' i.e. we can say that as first two lines matches the condition therefore they get selected.
2. not():
This method is used to select the element or elements that do not fullfill (unmatch) the given creteria.It is inverse of the filter() method.
Example:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").not(".intro").css("background-color", "yellow");
});
</script>
</head>
<body>
<h1>Welcome</h1>
<p>First</p>
<p class="intro">Second</p>
<p class="intro">Third</p>
<p>Fourth</p>
</body>
</html>
In this example the first & the fourth line gets selected as they do not fullfill the criteria. i.e. as the first & the fourth line does not contain the class 'intro' therefore they get selected.
0 Comment(s)