Select Parent, Child, sibling,descendants HTML element using jquery

Spirituality, Knowledge and Entertainment

Tweets by @sarinmall85

Select Parent, Child, sibling,descendants HTML element using jquery

Posted By Sarin on May 24, 2012

Latest Hinduism news

4770 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 Tumblr

Science in Hinduism-Gravitational force and repulsive force
Call JavaScript functions from silverlight
Science in Hinduism-Theory of perception
Generation and use of electricity in vedic era
Changing CSS Properties of HTML element using JQuery
Appending Html elements or contents dynamically
Creating your first application in JQuery
Manipulating Elements and Animations Using Jquery
JQuery FAQ and Jquery Effects
Ge the total number of HTML elements in a page

Post Comment

My Profile

Software developer by profession,
Poet by hobby,
Blogger by Passion
Birth Place: Munger (Yoga city)
Residence: Mumbai, Maharashtra
Prof exp: 8 years

Read More about me

Read my daily what'sapp quotes