Home  >  jQuery

jQuery eq() Method and :eq() Selector

July 23, 2014
The eq() method find the single indexed element in the set elements. eq() method is set integer number. An integer indicating the 0-based position of the element. An integer number is counting top and backwards position.

eq() method

As we know that index start from 0, so if i pass 0 in eq() method it will return the first DOM element and if pass 1 it will return second DOM element and pass -1 it will return last first element.

Syntax - $(selector).eq(index)
<ul>
    <li>First element</li>
   <li>Second Element</li>
   <li>Third Element</li>
   <li>Fourth Element</li>
   <li>Five Element</li>
</ul> 
The eq() method can apply 0-4 integer number for select DOM element.
$( "li" ).eq(3).css("background","red"); 
We know that eq() method is start count 0 number from top, so It will give result li number 4 content red background.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>nth-child demo</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    
       $("li").eq(3).css('background','red');   
  })
</script>
<style>
  li{ float:left; border:1px solid #000; list-style:none; padding:10px;}
</style>
</head>
<body>
  <ul>
    <li>First Element</li>
	<li>Second Element</li>
	<li>Third Element</li>
	<li>Fourth Element</li>
	<li>Five Element</li>
  </ul>
</body>
</html> 
Output
jQuery eq() Method and :eq() Selector
If apply negative integer
$( "li" ).eq(-3).css("background","red");
 
If integer number pass in negative it will count from bottom. And third li content will red background because negative integer start from 1.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>nth-child demo</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    
       $("li").eq(-3).css('background','red');   
  })
</script>
<style>
  li{ float:left; border:1px solid #000; list-style:none; padding:10px;}
</style>
</head>
<body>
  <ul>
    <li>First Element</li>
	<li>Second Element</li>
	<li>Third Element</li>
	<li>Fourth Element</li>
	<li>Five Element</li>
  </ul>
</body>
</html> 
Output
jQuery eq() Method and :eq() Selector



:eq() Selector

The :eq() selector selects an element with a specific index number. All index number is integer and start to 0 not 1.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>nth-child demo</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    
       $("li:eq(2)").css('background','blue');   
  })
</script>
<style>
  li{ float:left; border:1px solid #000; list-style:none; padding:10px;}
</style>
</head>
<body>
  <ul>
    <li>First Element</li>
	<li>Second Element</li>
	<li>Third Element</li>
	<li>Fourth Element</li>
	<li>Five Element</li>
  </ul>
</body>
</html> 
FIND MORE TUTORILAS






©2019 concretepage.com | Privacy Policy | Contact Us