How to Use Jquery Selectors Filters

jquery selector element examplesjquery selector element examples

Jquery filters selectors are used to select the HTML elements of a page. They have more fine-grained control to select a particular element. In the previous post we have discussed the Jquery selectors with examples.

Jquery filters selectors list:

Filters Explanation
:first It will select the first element of any type given.
:last It will select the last element of any type given.
:even It will select only those elements that are on even positions.
:odd It will select only those elements that are on odd positions.
:eq(n) It will select the element at index n within the matched set.
:gt(n) It will select the elements that are after the given index. (gt greater than)
:lt(n) It will select the elements that are before the given index. (lt less than)
:header It will select all the header elements or the heading tags (h1, h2, h3, …)
:animated It will select all the which are currently being animated in some way
:not(selector) It will select all the other elements except the given selector.

 

jquery selector element examples

jquery Filter selectors examples

Jquery Filters Examples

Now let us see some examples of the above mentioned Jquery filters selectors.

Jquery filters selectors code example:

<!DOCTYPE html >

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>

<title>Untitled Document</title>

<script>

$(document).ready(function(e) {

//Jquery code goes here

//$(“p:first”).css(“border”, “2px dotted red”);

//$(“p:last”).css(“border”, “2px dotted red”);

//$(“li:even”).css(“border”, “2px dotted red”);

//$(“li:odd”).css(“border”, “2px dotted red”);

//$(“li:eq(1)”).css(“border”, “2px dotted red”);

//$(“li:gt(1)”).css(“border”, “2px dotted red”);

//$(“li:lt(2)”).css(“border”, “2px dotted red”);

});

</script>

</head>

 

<body>

<p>First Paragraph</p>

<div id=”my_div_id”>First div</div>

<div class=”parent_element”>

<p class=”just_element”>Second Paragraph with class just_element</p>

<div class=”my_div_class”>Second div with class my_div_class</div>

<p>Third Paragraph</p>

</div>

<div class=”element_div”>Third div with class just_element</div>

<ol>

<li>first element</li>

<li class=”just_element”>second element with class just_element</li>

<li>third element</li>

<li class=”just_element”>fourth element</li>

</ol>

<div>Last div</div>

<p>Last p</p>

</body>

</html>

Note: you can copy the code above and replace the “//Jquery code goes here” string in the document.ready function with the following code to understand the Jquery filters selectors.

$("p:first").css("border", "2px dotted red");

The above line of code will select the first paragraph and will put dotted border around it in the html code.

$("p:last").css("border", "2px dotted red");

This line of code will select only the last paragraph and will put dotted border around it of the example code.

$("li:even").css("border", "2px dotted red");

This will select all the <li> tags with even index values and put border around them. In this example it is the first (zeroth) and the second <li>.

$("li:odd").css("border", "2px dotted red");

This will select all the odd <li> tags in the above code.

$("li:eq(1)").css("border", "2px dotted red");

This code selects the second <li> of the code example and puts the border around it.

$("li:gt(1)").css("border", "2px dotted red");

In the above line of code we are selecting all the <li> tags that are after the second <li> tag.

$("li:lt(2)").css("border", "2px dotted red");

This line of code will select all the <li> tags that are below the 3rd and will put border around them.

Comments