jquery come modificare un solo genitore al passaggio del mouse su un passaggio del mouse

Question

Vorrei cambiare solo un genitore quando passa il mouse sui tag <p>. Il codice è:

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

e l'HTML è:

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

Quando con il mouse sopra "xxxx", che voglio "1" e "xxxx" per cambiare, ma "2" e "yyyy" non fare nulla e quando passo il mouse su "yyyy", voglio "2" e "yyyy" per cambiare ma "1" e "xxxx" non fanno nulla.

Sono nuovo di jQuery.

Answer 1

Si potrebbe utilizzare

$('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'); 
}); 

Non dovete utilizzare un ogni ciclo per aggiungere i aleggia. Se hai selezionato più elementi, applicherà l'evento su tutti gli elementi.

Detto ciò, ho leggermente ottimizzato il codice.

Ho aggiunto il passaggio del mouse sul genitore del paragrafo, proprio come hai fatto tu. Usando $(this) nella callback dell'evento posso effettivamente selezionare l'elemento hovered e applicare gli stili su quell'elemento.

Perché voglio che la dimensione del carattere si applichi al paragrafo, prima seleziono il bambino desiderato.

---

Riassumendo sopra up:

• trovare gli elementi paragrafi ($('p.hover'))
• ottenerlo del genitore, l'elemento li (.parent())
• Applicare l'evento hover (.hover())

Una volta chiamato l'evento hover:

• Get elemento corrente ($(this))
• Trova il punto interno (.children('p'))
• applicare stili
Parent

Answer 3

di <p> nel tuo caso è <li>. Avete bisogno di:

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