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

Similar Posts

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *