In this post, we are learning about
jQuery to select the Nth Child selector.
jQuery allows we to select not just the first or last child element, but also the nth child element.
To select the nth child element, we use the nth-child selector.
where n is the index number of the child.
For example, to match the third child element, we use this syntax:
To match the third child <p> element, we use this selector.
Below code example puts for see above jQuery to select the Nth Child selector working.
jqscript.html
<html>
<head>
<title>
Selecting the third child
</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function setStyle()
{
$('p:nth-child(3)').css("font-style", "italic");
}
</script>
</head>
<body>
<h1>Selecting the third child</h1>
<div>
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<p>This is paragraph 3.</p>
<p>This is paragraph 4.</p>
</div>
<form>
<input type="button"
value="Select"
onclick="setStyle()"
</input>
</form>
</body>
</html>
Output:
No comments:
Post a Comment
Please do not enter any spam link in the comment box.