jQuery .children() method gets the child of selected elements
Syntax and Description
.children([selector])
selector (optional) is a string containing a
selector expression to match elements against.
Return value is the new jQuery object.
.children([selector]) gets the children of
each element in the set of matched elements, optionally
filtered by a selector.
Get the child of a div element
The following code gets the children from DIV element. And then applies border to it.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from w w w . j a v a 2 s. c o m-->
$("div").children().css("border", "3px double red");
});
</script>
</head>
<body>
<body>
<div><span>span</span>div</div>
</body>
</html>
Get child count
The following code shows the count of target children.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from ww w . j a va2 s .c o m-->
$("#container").click(function (e) {
var $ch = $(e.target).children();
alert($ch.length);
e.preventDefault();
return false;
});
});
</script>
</head>
<body>
<body>
<div id="container">
<div>
<p>This <span>is the <em>way</em> we</span>
write <em>the</em> demo, java 2s.com</p>
</div>
</div>
</body>
</html>
All children of a list element
The following code gets all LI elements from a UL
element
with child method and adds class to all of them.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type='text/javascript'>
var tmpExample = {
ready : function() {<!--from w ww .j a v a2 s.c o m-->
$('ul').children().addClass('tmpChild');
}
};
$(document).ready(tmpExample.ready);
</script>
<style type='text/css'>
li.tmpChild {
background: #cf0c35;
color: white;
}
</style>
</head>
<body>
<ul>
<li>java 2s.com</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
</ul>
</body>
</html>
Insert span one after another
The following code appends SPAN one after another.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from w w w. j av a 2s . com-->
$("input").keypress(function (e) {
var c = String.fromCharCode(e.which);
$("p").append($("<span/>")).children(":last").append(document.createTextNode(c));
$("div").text(e.which);
});
});
</script>
</head>
<body>
<body>
<input type="text" />
<p>Add text - </p>
<div></div>
</body>
</html>