Login

Username:

Password: 

Join us Now |  Forgot Password? | Forgot UserName?

jQuery

Learn step by step



jQuery Traversing-Filtering

Narrow Down The Search For Elements

The 3 most basic filtering functions are first(), last() and eq(), that allow us to select a specific element based on its position in a group of elements.

Other filtering functions, such as filter() and not() that allow us to select elements that match, or do not match, a particular criteria.

jQuery first() Method

The first() returns the first element of the selected elements.

The below given example selects the first <p> element inside the first <div> element:


<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div p").first().css("background-color","red");
});
</script>
</head>
<body>
<h1>Welcome to My Tuton</h1>
<p>This is the first paragraph in body.</p>
<div style="border: 1px solid black;">
<p>This is the first paragraph in a div.</p>
<p>This is the last paragraph in a div.</p>
</div><br>
<div style="border: 1px solid black;">
<p>This is the first paragraph in another div.</p>
<p>This is the last paragraph in another div.</p>
</div>
<p>This is the last paragraph in body.</p>
</body>
</html>

Output

Welcome to My Tuton

This is the first paragraph in body.

This is the first paragraph in a div.

This is the last paragraph in a div.


This is the first paragraph in another div.

This is the last paragraph in another div.

This is the last paragraph in body.

jQuery last() Method

The last() returns the last element of the selected elements.

The below given example selects the last <p> element inside the last <div> element:


<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div p").last().css("background-color","red");
});
</script>
</head>
<body>
<h1>Welcome to My Tuton</h1>
<p>This is the first paragraph in body.</p>
<div style="border: 1px solid black;">
<p>This is the first paragraph in a div.</p>
<p>This is the last paragraph in a div.</p>
</div><br>
<div style="border: 1px solid black;">
<p>This is the first paragraph in another div.</p>
<p>This is the last paragraph in another div.</p>
</div>
<p>This is the last paragraph in body.</p>
</body>
</html>

Output

Welcome to My Tuton

This is the first paragraph in body.

This is the first paragraph in a div.

This is the last paragraph in a div.


This is the first paragraph in another div.

This is the last paragraph in another div.

This is the last paragraph in body.

jQuery eq() method

The function eq() returns an element with a specific index number of selected elements.

The index numbers start at 0, so the first element will have the index number 0 and not 1. The below given example selects the second <p> element (index number 1):


<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").eq(1).css("background-color","green");
});
</script>
</head>
<body>

<h1>Welcome to Tuton</h1>
<p>My name is Ramesh (index 0).</p>
<p>Ramesh patel (index 1).</p>
<p>I live in Dungarpur (index 2).</p>
<p>My best friend is JP (index 3).</p>

</body>
</html>

OutPut

Welcome to Tuton

My name is Ramesh (index 0).

Ramesh patel (index 1).

I live in Dungarpur (index 2).

My best friend is JP (index 3).

jQuery filter() Method

The method filter() lets us specify an criteria. Elements that do not match the criteria are removed from the selection, and elements matched will be returned.

The below given is a example that returns all the

elements with class name "intro":


<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").filter(".intro").css("background-color","pink");
});
</script>
</head>
<body>
<h1>Welcome to My Tuton</h1>
<p>My name is Donald.</p>
<p class="intro">I live in Dungarpur.</p>
<p class="intro">I love Dungarpur.</p>
<p>My best friend is JP.</p>
</body>
</html>

Output

Welcome to My Tuton

My name is Donald.

I live in Dungarpur.

I love Dungarpur.

My best friend is JP.

jQuery not() Method

The method not() returns all the elements that do not match the criteria.

Tip: The not() function is an opposite of filter().

The below given example returns all <p> elements that do not have class name "intro":


<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").not(".intro").css("background-color","blue");
});
</script>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p>My name is Ramesh.</p>
<p class="intro">I live in Dungarpur.</p>
<p class="intro">I love Udaipur.</p>
<p>My best friend is JP.</p>
</body>
</html>

Output

Welcome to My Homepage

My name is Ramesh.

I live in Dungarpur.

I love Udaipur.

My best friend is JP.


Related Videos