by Developer
17. January 2010 17:59
Getting the child elements of any HTMT element is very difficult in normal javascript. But it is very easy by using jQuery.
In the below code I explain how to display child elements by using jQuery.
<html>
<head>
<title>This is jquery example for displaying the number child elements and their text for given parent element</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var $nodes = $('#parent').children();
alert('Number of Elements for given tag: ' + $nodes.length);
var txt = "";
$('#parent').children().each(function() {
txt += $(this).text() + '\n';
});
alert('Text of all elements:\n\n' + txt);
alert('This is "p" tag text:\n\n' + $('#pid').text());
});
</script>
</head>
<body>
<div id="parent">
<div>First Element</div>
<div>Second Element</div>
<div>Third Element</div>
<div>Fourth Element</div>
</div>
<p id="pid">This is from 'p' tag</p>
</body>
</html>
Here children() jQuery function to get the childs of given parent element. By using $('#parent').children() code, we are getting the child elements of parent element whose id is "parent".
By using text() jQuery function we can get the text of any given element.
$(document).ready(function() {
var $nodes = $('#parent').children();
alert('Number of Elements for given tag: ' + $nodes.length);
var txt = "";
$('#parent').children().each(function() {
txt += $(this).text() + '\n';
});
alert('Text of all elements:\n\n' + txt);
alert('This is "p" tag text:\n\n' + $('#pid').text());
});
In the above code we display the child elements of "parent" id parent element using children() jQuery function and their text by using text() jQuery function. At the end I also display the individual <p> tag text whose id is "pid".
Download source code: third jQuery exmp.zip (35.80 kb)
ae7ef157-e9e4-4f7b-bea8-c34ea2edcea2|0|.0