Home  >  jQuery

jQuery DOM Selectors Tutorial with Examples

June 27, 2014
jQuery DOM simplifies HTML document traversing, it provides multiple variety of DOM methods. jquery DOM methods help to select element in document randomly. Most of the jquery DOM are used to filter out element from document. One or more DOM select parent and child element in document to change element behavior. We will discuss here Dom Selectors one by one with examples.

:nth-child() Selector

The jQuery :nth-child() is used to select all elements that are the nth-child of their parent.

Syntax - :nth-child(n|even|odd|formula)
The index of each child to match, starting with 1, the string even or odd, or an equation ( eg. :nth-child(even), :nth-child(4n),:nth-child(2n) )
jQuery DOM Selectors Tutorial with
Example
<!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(){
    $('table tr:nth-child(2)').css('background','#ccc'); 
	$('table tr td:nth-child(3)').css('color','green'); 
  })
</script>
</head>
<body>
<table width="500" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>nth-child</td>
    <td>nth-child</td>
    <td>nth-child</td>
  </tr>
  <tr>
    <td>nth-child</td>
    <td>nth-child</td>
    <td>nth-child</td>
  </tr>
  <tr>
    <td>nth-child</td>
    <td>nth-child</td>
    <td>nth-child</td>
  </tr>
  <tr>
    <td>nth-child</td>
    <td>nth-child</td>
    <td>nth-child</td>
  </tr>
</table></body></html> 
Output
jQuery DOM Selectors Tutorial with

:nth-last-child() Selector

The jquery :nth-last-child selects all element of their parent, it's counting from last element to the first element.

CSS Syntax :nth-last-child(n)
The value of n is "1-indexed", meaning that the counting starts at 1.
Example :nth-last-child(n), :nth-last-child(odd), :nth-last-child(even)
<!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(){
    $('table tr:nth-last-child(2)').css('background','#ccc'); 
	$('table tr td:nth-last-child(2n)').css('color','red'); 
  })
</script>
</head>
<body>
<table width="500" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>nth-child</td>
    <td>nth-child</td>
    <td>nth-child</td>
  </tr>
  <tr>
    <td>nth-child</td>
    <td>nth-child</td>
    <td>nth-child</td>
  </tr>
  <tr>
    <td>nth-child</td>
    <td>nth-child</td>
    <td>nth-child</td>
  </tr>
  <tr>
    <td>nth-child</td>
    <td>nth-child</td>
    <td>nth-child</td>
  </tr></table></body></html> 
Output
jQuery DOM Selectors Tutorial with
table tr:nth-last-child(2) selects last second row in table.

:nth-last-child(odd)

:nth-last-child(odd) selected odd row from bottom to table.
<!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(){
    $('table tr:nth-last-child(odd)').css('background','#ccc'); 

$('table tr td:nth-last-child(2n)').css('color','red'); 
  })
</script>
</head>
<body>
<table width="500" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>nth-child</td>
    <td>nth-child</td>
    <td>nth-child</td>
  </tr>
  <tr>
    <td>nth-child</td>
    <td>nth-child</td>
    <td>nth-child</td>
  </tr>
  <tr>
    <td>nth-child</td>
    <td>nth-child</td>
    <td>nth-child</td>
  </tr>
  <tr>
    <td>nth-child</td>
    <td>nth-child</td>
    <td>nth-child</td>
  </tr></table></body></html> 
Output
jQuery DOM Selectors Tutorial with

:nth-of-type() Selector

:nth-of-type selector selects all elements that are the nth child of their parent element relation to siblings with the same element.

Syntext- :nth-of-type(n), :nth-of-type(odd), :nth-of-type(even).
The value of n is 1-indexed (Counting starts at 1). Example
<!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:nth-of-type(2)" )
     .append( "<li style='color:red'>Example of :nth-of-type</li>" )
  })
</script>
</head>
<body>
<div>
<ul>
<li>John</li>
<li>Smith</li>
<li>Robert</li>
<li>Ram</li>
<li>Anderson</li>
</ul>
</div>
</body></html> 
Output
jQuery DOM Selectors Tutorial with

:parent()

parent() method is a jQuery extension, it is returns the direct parent element of the selected element. This method only pass a single level up the DOM tree.

Example
<!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(){
    $('.child').parent().css('border-color','red');
	
$('.child').parent().parent().css('border-color','blue');
  })
</script>
<style>
  div{border:1px solid; margin:10px;}  
</style>
</head>
<body>
<div style="width:400px;">
 A
 <div>
  Grandparent
   <div>
    parent
<div class="child">
       Child
     </div>
   </div>
 </div>
</div>
</body></html> 
jQuery DOM Selectors Tutorial with
FIND MORE TUTORILAS


©2019 concretepage.com | Privacy Policy | Contact Us