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:

Curs JavaScript


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="https://marplo.net/javascript/" title="Curs JavaScript">Curs JavaScript</a></li>
 <li><a href="https://marplo.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="https://marplo.net/javascript/" title="Curs JavaScript" class="clsa">Curs JavaScript</a></li>
 <li><a href="https://marplo.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):
Cerc Romb Triunghi

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:


• 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:

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag defineste zona de click intr-o harta creata dintr-o imagine?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Ce proprietate CSS indica ce sa se intample cand continutul unui element depaseste dimensiunile lui?
display overflow position
#id {
  overflow: auto;
}
Clic pe evenimentul care este declansat cand mouse-ul e deasupra unui obiect.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Sa ai Viata Buna");
}
Indicati variabila PHP ce contine datele adaugate in adresa URL, dupa caracterul "?".
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Clic pe pronumele reflexiv care e potrivit in propozitia: "Marc is the boy ... won the prize".
who which whoever
Marc is the boy who won the prize.
- Marc e baiatul care a castigat premiul.
Clic pe pronumele reflexiv care e potrivit in propozitia: "Voy a ver al pintor de ... les hablé ayer".
que quien cuyo
Voy a ver al pintor de quien les hablé ayer.
- Ma duc sa vad pictorul despre care ti-am vorbit ieri.
jQuery parent children si nth-child

Last accessed pages

  1. Verbe modale - Modal verbs - CAN, COULD, MAY, MIGHT, MUST (27398)
  2. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (37409)
  3. Numerale, Numere in limba engleza - Numerals (24264)
  4. Articolul din limba engleza - The article (26406)
  5. Gramatica limbii engleze - Prezentare Generala (105532)

Popular pages this month

  1. Prezentul simplu si continuu - Present Tense Simple and Continuous (3706)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (3277)
  3. Gramatica limbii engleze - Prezentare Generala (2797)
  4. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (2397)
  5. Trecutul simplu si continuu - Past Tense Simple and Continuous (2005)