Click here to check my latest exciting videos on youtube
Blogs
SpiritualVideos
TechnicalVideos
Tweets by @sarinmall85
Latest Articles
Select Parent, Child, sibling,descendants HTML element using jquery
Posted By
Sarin
on
May 24, 2012
Latest Hinduism news
4772 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
Related Articles
Replacing and removing HTML Elements
Creating your first application in JQuery
Generation and use of electricity in vedic era
Changing CSS Properties of HTML element using JQuery
Ge the total number of HTML elements in a page
Science in Hinduism-Theory of perception
Select range of HTML elements using Jquery slice function
Advanced JQuery Fading Effects
Cloning HTML Elements using jquery
Playing with HTML using Jquery
Post Comment
Most Liked articles on mallstuffs
Chakravyuha-The most deadliest and brilliant military formation
1300+ likes
Floating stones of Shri Ram Setu
220+ likes
Dinosaurs in ancient hinduism scriptures
210+ likes
Science in Hinduism-Einstein Theory of relativity
200+ likes
Why scientists want to protect ram setu
120+ likes
Why number 108 is holy and auspicious in Hinduism
110+ likes
Korean connection with ayodhya and lord rama
110+ likes
Proof of Lord krishna existence-1
90+ likes
Swastika good luck coins of american manufacturing industry
90+ likes
Why Hindus blow conch and significance of conch in Hinduism
80+ likes
Sharing is caring...Please like or share this article
Share on Tumblr
Latest post on mallstuffs
Corruption in Dy. Registrar Office and Housing Societies
My Youtube Channel
About me
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
Most Viewed Articles
Latest Spiritual Videos
Latest News
Latest Social Post
Latest WhatsApp Quotes
Most Viewed Articles
1. Tips and tricks with ajax calendar extender control
2. Data Validation using Ajax MaskedEditExtender control
3. Jquery features, Advantages and disadvantages
4. Uploading file asynchronously using Ajax AsyncFileUpload control
5. Uploading file asynchronously using Ajax AsyncFileUpload control
6. Nested Transaction, SavePoint and error handling in sql server
7. Validations using regular expressions and commonly used regex validations
8. How to encode and decode HTML request in ASP.NET
9. Show catchy cool tool-tips with Ajax
10. Response.Redirect throws “Thread was being aborted”