rodzic vs najbliżej

Question

Dlaczego to działa:

$('.button_30').click(function(){ 
    $(this).closest('.portlet').find('.portlet_content').text("foo"); 
});​ 

dowolny dlaczego to nie działa:

$('.button_30').click(function(){ 
    $(this).parent('.portlet').find('.portlet_content').text("foo"); 
});​ 

gdzie html wygląda mniej więcej tak:

<div class="portlet portlet_30"> 

    <div class="portlet_header portlet_header_30"> 
     header content here 
    </div> 

    <div class="portlet_sub_header portlet_sub_header_30"> 
     <input type="text" class="textbox_30" /> 
    </div> 

    <div class="portlet_content portlet_content_30"> 
     results go here 
    </div> 

    <div class="portlet_footer portlet_footer_30"> 
     <input type="button" class="button_30" /> 
    </div> 

</div> 

<div class="portlet portlet_30"> 

    <div class="portlet_header portlet_header_30"> 
     header content here 
    </div> 

    <div class="portlet_sub_header portlet_sub_header_30"> 
     <input type="text" class="textbox_30 /> 
    </div> 

    <div class="portlet_content portlet_content_30"> 
     results go here 
    </div> 

    <div class="portlet_footer portlet_footer_30"> 
     <input type="button" class="button_30" /> 
    </div> 

</div> 

Answer 1

Ponieważ parent() będzie zwróć rodzicowi (bezpośredniemu przodkowi) tylko jeśli pasuje do sele Określono ctor.

Jednak closest() wyszuka wszystkie przodków i powrót jednego pierwszy pasujący do selektora.

jako rodzica button_30 jest div, którego dominującej jest div z klasy portlet funkcja parent() nie dopasowując się i powrotu zbiór pusty, w którym, jak closest()jest dopasowania go.

---

Aby zakończyć zestaw podobnych metod Tutaj masz parents(), czyli jak closest() ale doesnt zatrzymania na pierwszym dopasowanego elementu; zwraca wszystkich przodków pasujących do selektora.

Answer 2

• .parent() patrzy tylko na bezpośredniego przodka.

• .closest() patrzy na wszystkich przodków, a także element początkowy i zwraca pierwszy mecz.

• .parents() patrzy na wszystkich przodków i zwraca wszystkie dopasowania.

Answer 3

parent() wygląda tylko jeden poziom wyżej, można spróbować parents() szukać wszystko aż

$('.button_30').click(function(){ 
    $(this).parents('.portlet').find('.portlet_content').text("foo"); 
});​ 

widać documentation

Answer 4

Ponieważ jedynymi elementami, które pasują .portlet są dziadkowie , nie rodzice elementów, z którymi wydarzenie jest powiązane

Answer 5

Metodę closestmożna przetransmitować do drzewa przodków tak daleko, jak to konieczne, aby znaleźć dopasowanie selektora.

Sposób parent^{[API Ref]} wygląda tylko w bezpośrednim rodzicem.

Answer 6

Metoda sprawdza tylko jeden poziom w górę łańcucha elementów, a closest będzie sprawdzać listę rodziców do momentu znalezienia dopasowania (lub osiągnięcia znacznika html). Odpowiednikiem jest:

$('.button_30').click(function(){ 
    $(this).parents('.portlet:eq(0)').find('.portlet_content').text("foo"); 
});​ 

Answer 7

Ponieważ w drugim selektora szukasz Dominującej i ta funkcja ruch użytkownika do DOM do ojca węzła ale tylko one level który zawiera klasę portlet_footer portlet_footer_30 nie klasy, że jesteś przechodząc na selektor .portlet do pracy z parent powinieneś przenieść dwa poziomy innymi słowy.

each time that you're using parent you move one node up