jQuery children()
children() Visszaadja a kiválasztott elem, összes gyermek elemét. children("X") Zárójelben meghatározhatjuk, hogy melyik gyermek elemere van szükségünk.
$("div").children() Visszaadja a kiválasztott elem, azaz, az összes div elem, összes gyermekét.
$("ul").children() Visszaadja a kiválasztott elem, azaz, az összes ul elem, összes gyermekét.
$("div").children("p") Visszaadja az összes div elem, összes <p> gyermekét.
$("ul").children("li.valami") Visszaadja az összes ul elem, összes <li class="valami"> gyermekét.
$("#egyedi").children("p") Visszaadja az id="egyedi" azonosítóval rendelkező elem, összes <p> gyermekét.
$(".valami").children("p") Visszaadja class="valami" azonosítóval rendelkező összes elem, összes <p> gyermekét.
$("div.valami").children("p") Visszaadja class="valami" azonosítóval rendelkező div elemek, összes <p> gyermekét.
Példa.
Határozzuk meg, az <ul> vagy <ol> elemekhez tartozó gyermeket, (közvetlen leszármazottakat).
|
div (nagyszülő)
<p> Ez p elem, az ol elemben. |
div (nagyszülő)
<p> Ez p elem, az ul elemben. |
<head>
<style>
.leszarmazottak * { display: block; border: 2px solid lightgrey; font-size:12px; color: blue; padding: 3px; margin: 5px;}
.leszarmazottak span{background-color: moccasin;}
.elemleft, .elemright {float: left; border: 2px solid blue; padding: 5px; margin-bottom: 5px;}
.elemright {margin-left: 3%;}
</style>
<script>
$(document).ready(function(){
// ------------------------------------------------------
$("#ul_children").click(function(){
$("ul").children().css({"color": "yellow", "font-weight": "bold", "border": "2px solid blue","background-color": "red"});
});
// ------------------------------------------------------
$("#ol_children").click(function(){
$("ol").children().css({"color": "yellow", "font-weight": "bold", "border": "2px solid blue","background-color": "red"});
});
// ------------------------------------------------------
$("#ul_li").click(function(){
$("ul > li").css( "background-color", "red" );
});
// ------------------------------------------------------
$("#ol_li").click(function(){
$("ol > li").css( "background-color", "red" );
});
// ------------------------------------------------------
$("#ul_children02").click(function(){
$("ul").children("li.masodik").css({"color": "yellow", "font-weight": "bold", "border": "2px solid blue","background-color": "red"});
});
// ------------------------------------------------------
$("#children03").click(function(){
$("ul:eq(0)").children("li.masodik").css({"color": "yellow", "font-weight": "bold", "border": "2px solid blue","background-color": "red"});
});
// ------------------------------------------------------
$("#ol_children02").click(function(){
$("ol").children("li.masodik").css({"color": "yellow", "font-weight": "bold", "border": "2px solid blue","background-color": "red"});
});
// ------------------------------------------------------------------------------------------------
// ----------------------- find -----------------------------
$("#find01").click(function(){
$("ul").find("li.masodik").css( "background-color", "red" );
});
// ------------------------------------------------------
$("#find02").click(function(){
$("ol").find("li.masodik").css( "background-color", "red" );
});
// ------------------------------------------------------
$("#find03").click(function(){
$("ol:eq(1)").find("li.masodik").css( "background-color", "red" );
});
});
</script>
</head>
<body>
<div class="leszarmazottak">
<div class="elemleft" style="width:420px;">div (nagyszülő)
<ul>ul (közvetlen szülő)
<li class="elso"><li class="elso">(gyermek)
<span>span (unoka)</span>
</li>
<li class="masodik"><li class="masodik"> (gyermek)
<span>span (unoka)</span>
</li>
<li><li> (gyermek)
<span>span (unoka)</span>
</li>
</ul>
<ol>ol (közvetlen szülő)
<li class="elso"><li class="elso">(gyermek)
<span>span (unoka)</span>
</li>
<li class="masodik"><li class="masodik"> (gyermek)
<span>span (unoka)</span>
</li>
<p><p> Ez p elem, az ol elemben.</p>
</ol>
</div>
<div class="elemright" style="width:420px;">div (nagyszülő)
<ol>ol (közvetlen szülő)
<li class="elso"><li class="elso">(gyermek)
<span>span (unoka)</span>
</li>
<li class="masodik"><li class="masodik"> (gyermek)
<span>span (unoka)</span>
</li>
<li><li> (gyermek)
<span>span (unoka)</span>
</li>
</ol>
<ul>ul (közvetlen szülő)
<li class="elso"><li class="elso">(gyermek)
<span>span (unoka)</span>
</li>
<li class="masodik"><li class="masodik"> (gyermek)
<span>span (unoka)</span>
</li>
<p><p> Ez p elem, az ul elemben.</p>
</ul>
</div>
</div>
<button id="ul_children">$("ul").children() összes gyermeke.</button>
<button id="ol_children">$("ol").children() összes gyermeke.</button>
<button id="ul_li">$("ul > li") li gyermekei.</button>
<button id="ol_li">$("ol > li") li gyermekei.</button>
<button id="ul_children02">$("ul").children("li.masodik") <li class="masodik"> gyermekei.</button>
<button id="ol_children02">$("ol").children("li.masodik") <li class="masodik"> gyermekei.</button>
<button id="children03">$("ul:eq(0)").children("li.masodik") <li class="masodik"> gyermekei.</button>
<button id="find01">$("ul").find("li.masodik") <li class="masodik"> gyermekei.</button>
<button id="find02">$("ol").find("li.masodik") <li class="masodik"> gyermekei.</button>
<button id="find03">$("ol:eq(1)").find("li.masodik") <li class="masodik"> gyermekei.</button>
</body>
|
2. példa.
Kiválasztott elem, gyermek elemeinek címkéje.
<head>
<script>
$(document).ready(function(){
$("#gyermek_elemek").click(function(){
var faBejaras = $("#gyerekek").children()
.map( function() { return this.tagName; } ).get().join(", ");
$("#cimkek").after("<p><b>" + faBejaras + "</b><p>");
});
});
</script>
</head>
<body>
|
<div id="gyerekek">
<h5>Címsor <span> elem a címsorban. </span></h5><p> Bekezdés <span> elem, a p elemben. </span></p> <pre> Pre elem.</pre><span> Span elem.</span> <p> Bekezdés. </p> <div>
<p> Bekezdés <span> elem, a p elemben. </span></p> <pre> Pre elem.</pre></div> <pre> Pre elem <span> elem, a pre elemben. </span> </pre>
</div> |
<div id="cimkek"><b><u>Közvetlen gyermekek címkéi:</u></b></div> <button id="gyermek_elemek">Gyermek elemek címkéi.<br />Kattints ide!</button> </body> |
A div id="gyerekek" elem, közvetlen gyermekeinek címkéi:
|