Click here to check my latest exciting videos on youtube
Search Mallstuffs

Flag Counter
Spirituality, Knowledge and Entertainment


Locations of visitors to this page


Latest Articles


Move to top
Select Parent, Child, sibling,descendants HTML element using jquery
Posted By Sarin on May 24, 2012     RSS Feeds     Latest Hinduism news
4562 Views

Often the elements you need to select, are nested inside other elements or are way far from your current html element. So, here we will deal the parent child types of selector through which we can navigate through athe dom html element at any level:
Below are some of the parent-child selector examples
  
<html>
<head>
   
<title>My Test Page</title>
   
<script src="jquery-1.6.4.min.js" type="text/javascript"></script>
   
<script type="text/javascript">
        $(document).ready(
function ()  {          
        });
   
</script>
</head>
<body>
<
h5>Selecting Form Elements</h5>
<div>
<
strong>Rama</strong>
<p title="kis">Krishna<p>
<strong id="kisna">Hare Krishna</strong>
<p title="ram">Hare Rama<p>
</div>
<div>
<strong class="shiv">Shiva</strong><br />
<strong>Om <b>Namah</b> Shivay</strong><br />
</
div>
</body>
</html>

To select elements based on their parents or children, try these selectors:
:first-child
: Selects the first child element. The following code alert the user with the first <strong> child of the first <div> :
  
   alert($('div strong:first-child').html());
  

  
:last-child: Selects the last child element.The following code alert the user with the first <strong> child of the last <div> :
  alert($('div:last-child strong:first-child').html());

  
nth child:  Selects the child element of the parent element. The following code alert the user with the first second <strong> child of the last <div> :

                alert($('div:last-child strong:nth-child(3)').html());
  

  
Note : index of nth child starts from 1 , not from 0.
  
✓ parent > child: Selects the child element of the parent element. The following code changes the text of all  strong  elements of last <div>
  
            $('div:last-child>strong').html('This text is changed');

  
E+F .  Selects the <p> element which is preceded by the first <strong> element of first <div>

             alert($('div  strong:first-child+p').html());
  


E~F  Matches all elements F proceeded by any sibling E. The following code selects the <div>  element content which is followed by the first <div>

             alert($('h3~div').text());
  


E:has(F)  Matches all elements with tag name E that have at least one descendent with tag name F. . The following code Selects the  <strong>  element content which has <b> tag as descendants

             alert($('strong:has(b)').html());
  


E.C  Matches all elements E with class name C. Omitting E is the same as *.C. The following code selects the  <strong>  element content which has class  named as shiv

             alert($('strong.shiv').html());
  


E#I  Matches element E with id of I. Omitting E is the same as *#I. The following code selects the  <strong> element  content which has  id  named as  kisna

             alert($(
'strong#kisna').html());
  


E[A]  Matches all elements E with attribute A of any value. . The following code selects all the  <p>  element content which  has  attribute named as title

             alert($('p[title]').html());


E[A=V]  Matches all elements E with attribute A whose value is exactly V. The following code selects all the  <p>  element content which has  attribute ‘title’ value equal to kis

             alert($('p[title=kis]').html());



E[A^=V]
  Matches  all elements E with attribute A whose value begins with V. The following code selects all the <p>  element content which has attribute ‘title’ beginning with r
  
             alert($('p[title^=r]').html());
  


E[A$=V]
  Matches all elements E with attribute A whose value ends with V.
  The following code selects all the
<p> element content which has attribute ‘title’ ending with  r

             alert($('p[title$=m]').html());


E[A*=V] Matches all elements E with attribute A whose value contains V. The following code selects all the <p> element content which has attribute ‘title’ containing is.
  
             alert($('p[title*=is]').html());



Note: Images used on this website are either a production of Bhaktivedanta Book Trust(https://www.krishna.com), Iskcon Foundation or were found in google search under "Free to use and share". If any of the images presented here violates copyright issues or infringes anyone copyright or are not under "Fair use", then please bring it to our notice. Read Disclaimer for more.

Share this to your friends. One of your friend is waiting for your share.
Share on Google+ Share on Tumblr Print Browser Favorite
Related Articles
Replacing and removing HTML Elements
Generation and use of electricity in vedic era
Select Parent, Child, sibling,descendants HTML element using jquery
Working with server controls and HMTL controls
Working with forms-Jquery form selector
Playing with HTML using Jquery
Select Groups of similar elements using position selector
Call JavaScript functions from silverlight
Creating your first application in JQuery
Select range of HTML elements using Jquery slice function

Post Comment