jquery, jak zmienić tylko jednego rodzica na hover

Question

Chciałbym zmienić tylko jednego rodzica po najechaniu na tagi <p>. Kod jest:

$('.hover').each(function() { 
    $(this).parent().hover(function() { 
      $('p').parent(this).css('font-size','30px'); 
     }, function() { 
      $('p').parent(this).css('font-size','10px'); 
    }); 
}); 

i HTML jest:

<ul> 
     <li>1 <p class='hover'>xxxx</p></li> 
     <li>2 <p class='hover'>yyyy</p></li> 
    </ul> 

Kiedy unoszą się nad "xxxx" chcę "1" i "xxxx", aby zmienić, ale "2" i "yyyy" nic nie rób, a gdy ustawię kursor nad "rrrr", chcę zmienić "2" i "rrrr", ale "1" i "xxxx" nic nie rób.

Jestem nowy w jQuery.

Answer 1

Można użyć

$('p').closest('li').css('font-size','30px'); 

Answer 2

$('p.hover').parent().hover(function() { 
    $(this).children('p').css('font-size','30px'); 
}, function() { 
    $(this).children('p').css('font-size','10px'); 
}); 

Nie muszą korzystać z każdej pętli dodać najechania kursorem. Jeśli wybrano wiele elementów, zastosuje to zdarzenie do wszystkich elementów.

Powiedziawszy to, nieznacznie zoptymalizowałem twój kod.

Dodałem wskaźnik myszy do rodzica akapitu, tak jak Ty. Używając numeru $(this) w wywołaniu zwrotnym zdarzenia, mogę faktycznie wybrać ukryty element i zastosować style tego elementu.

Ponieważ chcę, aby rozmiar czcionki miał zastosowanie do akapitu, najpierw wybieram żądane dziecko.

---

Podsumowując powyższe up:

• Znajdź elementy paragrafy ($('p.hover'))
• Uzyskaj to rodzic, element li (.parent())
• zastosować zdarzenie najechania (.hover())

Po wywołaniu zdarzenia najeżdżania:

• Pobierz bieżący element ($(this))
• Znajdź paragraf wewnętrzną (.children('p'))
• Zastosuj style

Answer 3

dominującą <p> w Twoim przypadku jest <li>. Potrzebujesz:

$('.hover').parent().parent().hover(
    function() { 
     $(this).css('font-size','30px'); 
    }, function() { 
     $(this).css('font-size','10px'); 
    });