Child filter basically handles filtration according to parent-child relationship
Some main Child filters are given below :
Example :
It filters the first span of each matched div.
Example :
It filters the last span of each matched div.
Finds the second li in each matched ul and notes it.
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 :
No comments:
Post a Comment