JavaScript DHTML/jQuery/children
Содержание
Add class to all children from UL
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
var tmpExample = {
ready : function() {
$("ul").children().addClass("tmpChild");
}
};
$(document).ready(tmpExample.ready);
</script>
<style type="text/css">
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
margin: 1px;
padding: 3px;
}
li.tmpChild {
background: #cf0c35;
color: white;
}
</style>
</head>
<body>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
</ul>
</body>
</html>
Append SPAN one after another
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("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>
Attaches a change event to the select that gets the text for each selected option
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
})
.change();
});
</script>
</head>
<body>
<body>
<select name="sweets" multiple="multiple">
<option>A</option>
<option selected="selected">B</option>
<option>C</option>
<option selected="selected">D</option>
<option>E</option>
<option>F</option>
</select>
<div></div>
</body>
</html>
children(expr): filter with an optional expression
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#container").click(function (e) {
var $kids = $(e.target).children();
alert($kids.length);
e.preventDefault();
return false;
});
});
</script>
</head>
<body>
<body>
<div id="container">
<div>
asdf
</div>
</div>
</body>
</html>
Children from DIV
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").children().css("border", "3px double red");
});
</script>
</head>
<body>
<body>
<div><span>span</span>div</div>
</body>
</html>
Get target children length
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#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,</p>
</div>
</div>
</body>
</html>