jQuery parent, children si nth-child() 21
Acest tutorial arata cum se lucreaza cu legaturile parinte (parent) si copii (children) in jQuery.
– parent se refera la elementul parinte in care este inclus direct alt element, denumit copil (child).
De exemplu, in acest cod HTML:
<div id=”parent_tag”>
<p id=”child_tag”>Text oarecare…</p>
<span>Alt element copil in „parent_tag”.</span>
</div>
– DIV-ul („parent_tag”) este elementul parinte pentru paragraf (<p>) si <span>. Tag-ul <p> si <span> sunt copii al lui „parent_tag” (DIV-ul).
jQuery parent()
Aceasta metoda preia elementul parinte al fiecarui element din setul curent de obiecte selectate.
Sintaxa:
obiect_jQuery.parent(selector)
– obiect_jQuery – reprezinta un set de elemente selectate in obiectul DOM.
– „selector” – este optional, si reprezinta un sir cu selector care sa filtreze elementul parinte selectat.
Exemplu, la clic pe un buton va fi afisata o fereastra alert cu ID-ul tag-ului parinte a imaginii cu class=”clsim”.
<div id=”thediv”>
<p id=”the_p”>
<img src=”imgs/javascript.gif” alt=”Curs JavaScript” class=”clsim” width=”200″ height=”30″ />
</p>
<button id=”btn”>Click</button>
</div>
<script type=”text/javascript”><!–
$(document).ready(function() {
// la clic pe #btn
$(‘#btn’).click(function(){
// preia ID-ul elementului parinte al lui „.clsim”
var idpr = $(‘.clsim’).parent().attr(‘id’);
alert(‘ID-ul elementului parinte al imaginii e:\n’+ idpr);
});
});
–></script>
Demo:
Un alt exemplu, cu un selector la metoda parent(), ca sa filtreze rezultatele.
– Adauga o culoare de fundal (background) la parintele fiecarui tag <a> (doar la parintele cu class=”clsli”).
<ul>
<li class=”clsli”><a href=”http://www.discant.net/javascript/” title=”Curs JavaScript”>Curs JavaScript</a></li>
<li><a href=”http://www.discant.net/html/” title=”Curs HTML”>Curs HTML</a></li>
<li class=”clsli”><a href=”http://www.coursesweb.net/jquery/jquery-course” title=”Curs jQuery”>Curs jQuery</a></li>
</ul>
<button id=”btn2″>Click</button>
<script type=”text/javascript”><!–
$(document).ready(function() {
// la clic pe #btn2
$(‘#btn2’).click(function(){
$(‘a’).parent(‘.clsli’).css(‘background’, ‘#08ed09’);
});
});
–></script>
Demo:
• Daca doriti sa obtineti parintele elementului parinte, se foloseste aceasta sintaxa:
obiect_jQuery.parent().parent()
jQuery children()
Obtine elementele copil aflate direct in fiecare obiect din setul selectat.
Sintaxa:
obiect_jQuery.children(selector)
– obiect_jQuery – reprezinta un set de elemente selectate in obiectul DOM.
– „selector” – este optional, si reprezinta un sir cu selector care sa filtreze „copii” selectati.
Exemplu, schimba culoarea textului la copii din fiecare <li> (doar la copii cu class=”clsa”).
<ul>
<li><a href=”http://www.discant.net/javascript/” title=”Curs JavaScript” class=”clsa”>Curs JavaScript</a></li>
<li><a href=”http://www.discant.net/html/” title=”Curs HTML”>Curs HTML</a></li>
<li><a href=”http://www.coursesweb.net/jquery/jquery-course” title=”Curs jQuery” class=”clsa”>Curs jQuery</a></li>
</ul>
<button id=”btn3″>Click</button>
<script type=”text/javascript”><!–
$(document).ready(function() {
// la clic pe #btn3
$(‘#btn3’).click(function(){
$(‘li’).children(‘.clsa’).css(‘color’, ‘#fe0001’);
});
});
–></script>
Demo:
• jQuery are si selectori care pot fi utilizati in relatia parinte-copil, precum :nth-child() si parent > child.
Selectorul :nth-child()
Selectorul :nth-child(n) selecteaza elementele care sunt al n-lea copil in parintele lor.
Sintaxa:
$(selector:nth-child(n))
Aceasta pseudo-clasa este derivata din CSS. Index-ul (n) incepe cu 1 pentru primul copil.
Exemplu, adauga un chenar in jurul imaginii cu index de ordine „ni” din DIV-ul cu id=”iddv”. Index-ul „ni” este marit cu o unitate la fiecare clic.
<div id=”iddv”>
<img src=”imgs/circle.gif” alt=”Cerc” width=”29″ height=”30″ />
<img src=”imgs/rhomb.gif” alt=”Romb” width=”37″ height=”30″ />
<img src=”imgs/triangle.gif” alt=”Triunghi” width=”36″ height=”32″ />
</div>
<button id=”btn4″>Click</button>
<script type=”text/javascript”><!–
$(document).ready(function() {
var ni = 1;
var nrims = $(‘#iddv img’).length; // numar de imagini in #iddv
// la clic pe #btn4
$(‘#btn4’).click(function(){
// adauga bordura la al „ni-lea” imagine din #iddv
$(‘#iddv img:nth-child(‘+ ni+ ‘)’).css(‘border’, ‘2px dashed blue’);
ni++; // mareste „ni” cu 1
// sterge evenimentul „click” de la #btn4 daca „ni” e mai mare decat numar imagini
if(ni > nrims) $(„#btn4”).unbind(‘click’);
});
});
–></script>
Demo (clic de cateva ori pe buton):
jQuery(„parinte > copil”)
Selectorul $(„parinte > copil”) selecteaza elementele „copil” aflate direct in elementele „parinte”.
Exemplu, la clic pe un buton, adauga un chenar in jurul listelor care sunt copii directi in <ul class=”clsul”>.
<ul class=”clsul”>
<li>Item 1</li>
<li>Item 2, cu UL inclus
<ul><li>Item inclus 1</li><li>Item inclus 2</li></ul>
</li>
<li>Item 3</li>
</ul><button id=”btn5″>Click</button>
<script type=”text/javascript”><!–
$(document).ready(function() {
// la clic pe #btn5
$(‘#btn5’).click(function(){
$(‘ul.clsul > li’).css(‘border’, ‘1px solid #fe0001’);
});
});
–></script>
Demo:
- Item 1
- Item 2, cu UL inclus
- Item inclus 1
- Item inclus 2
- Item 3
• Observati diferenta dintre aceste doua selectoare: „parinte > copil” si „parinte copil” (fara ‘>’ ).
Selectorul „P > C” seleceaza doar elementele copil directe, dar „P C” selecteaza toate elementele copil, cuprinzand si pe cele incluse de rang 2, 3 …
– Iata acelasi exemplu prezentat mai sus, dar cu „P C” (fara ‘>’ ). Chenarul va fi adaugat si la listele care sunt incluse in al doilea UL.
<ul class=”clsul”>
<li>Item 1</li>
<li>Item 2, cu UL inclus
<ul><li>Item inclus 1</li><li>Item inclus 2</li></ul>
</li>
<li>Item 3</li>
</ul><button id=”btn6″>Click</button>
<script type=”text/javascript”><!–
$(document).ready(function() {
// la clic pe #btn6
$(‘#btn6’).click(function(){
$(‘ul.clsul li’).css(‘border’, ‘1px solid #fe0001’);
});
});
–></script>
Demo:
- Item 1
- Item 2, cu UL inclus
- Item inclus 1
- Item inclus 2
- Item 3