Select Parent, Child, sibling,descendants HTML element using jquery
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.
Related Articles
Advanced JQuery Fading Effects
Science in Hinduism-Theory of perception
Select Parent, Child, sibling,descendants HTML element using jquery
Cloning HTML Elements using jquery
Select range of HTML elements using Jquery slice function
Working with server controls and HMTL controls
Creating your first application in JQuery
Jquery features, Advantages and disadvantages
Call JavaScript functions from silverlight
Playing with HTML using Jquery
Post Comment