Child Filter

Child filter basically handles filtration according to parent-child relationship

Child Filter

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.

Tutorials

  1. What is jQuery?
  2. Downloading and Installing jQuery
  3. jQuery to Retrieve Server's Current Time
  4. jQuery Load Content
  5. jQuery to Vertical Image Scroller
  6. jQuery Toggle the Div
  7. jQuery to text changes with fading effect
  8. jQuery to text changes with sliding effect
  9. jQuery Drop Down Menu
  10. jQuery chain-able state of transition
  11. jQuery To Simple tabs
  12. jQuery to Simple Image Scroller
  13. jQuery To Slide Effects tabs
  14. jQuery to Show Data Randomly
  15. jQuery to Post Data Check
  16. jQuery to Image Changes With Sliding Effect
  17. jQuery to Image Magnifier
  18. jQuery to Image Changes With Fading Effect
  19. jQuery to "Hello World"
  20. jQuery To Fade Effects tabs
  21. jQuery to validate Email Address
  22. jQuery To Hide the Div
  23. jQuery To Custom tabs
  24. jQuery to Select Multiple CheckBox
  25. jQuery To callback tabs
  26. jQuery to Auto Image Scroller
  27. No Max-height Fixed
  28. With Fixed Max-Height
  29. jQuery - jQuery Tutorials and examples
  30. jQuery - jQuery Tutorials and examples
  31. jQuery Demos
  32. jQuery Features
  33. jQuery Hello World
  34. jQuery Hello World alert
  35. How jQuery works?
  36. jQuery with other libraries
  37. jQuery Utility Functions
  38. jQuery selectors
  39. Use of Selectors
  40. jQuery CSS Selector