Home Ajax Jquery Child Filter

Related Tutorials


 
 

Share on Google+Share on Google+

Child Filter

Advertisement
Child filter basically handles filtration according to parent-child relationship

Child Filter

     

Child Filter

Child filter basically handles filtration according to parent-child relationship.

Some main Child filters are given below :

: first-child Selector

It filters all the elements which are first child of their parent.

Example :

$("div span: first-child").css("text-decoration", "underline")

It filters the first span of each matched div.

: last-child Selector

It filters all the elements which are last child of their parent.

Example :

$("div span: last-child").css({color:"red", fontSize:"80%"})

It filters the last span of each matched div.

: nth-child Selector

It filters all the elements which are nth child of their parent.

Example : (nthChildSelector.html)

<!DOCTYPE html>
<html>
<head>
<style>

div { float:left; }
span { color:blue; }
</style>
<script src="jquery-1.4.2.js"></script>
</head>
<body>
<div><ul>
<li>Ankit</li>
<li>Ravi</li>
<li>Bharat</li>

</ul></div>
<div><ul>
<li>Satya Prakash</li>
</ul></div>

<div><ul>
<li>Gyan</li>
<li>Neha</li>
<li>Bikrant</li>
<li>Anushmita</li>
</ul></div>
<script>$("ul li:nth-child(2)").append("<span> - 2nd!</span>");</script>
</body>
</html>

Output :

Finds the second li in each matched ul and notes it.

 

: only-child Selector

It filters all the elements which are only child of their parent.

Example : (onlyChildSelector.html)

<!DOCTYPE html>
<html>
<head>
<style>

div { width:100px; height:80px; margin:5px; float:left; background:#b9e }
</style>
<script src="jquery-1.4.2.js"></script>
</head>
<body>
<div>
<button>Sibling!</button>
<button>Sibling!</button>
</div>

<div>
<button>Sibling!</button>
</div>
<div>
None
</div>

<div>
<button>Sibling!</button>
<button>Sibling!</button>
<button>Sibling!</button>

</div>
<div>
<button>Sibling!</button>
</div>
<script>$("div button:only-child").text("Alone").css("border", "2px blue solid");</script>
</body>
</html>

Output :

Description of the program

It filters the button with no siblings in each matched div and  modify it's look by creating border around it and rename it's name.

Download Source Code

Learn from experts! Attend jQuery Training classes.

Advertisement

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: September 15, 2010

Related Tutorials

Discuss: Child Filter  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:2
umesh
October 12, 2011
hi,please all

hi,dear all,please take it........................................................................................
sita
May 10, 2012
jquery

Not good.Not sfficient..
DMCA.com