jquery cách chỉ thay đổi một phụ huynh khi di chuột

Question

Tôi muốn thay đổi chỉ một phụ huynh khi tôi di chuột qua các thẻ <p>. Mã này là:

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

và HTML là:

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

Khi tôi di chuột qua "xxxx", tôi muốn "1" và "xxxx" để thay đổi nhưng "2" và "yyyy" không làm gì cả, và khi tôi di chuột qua "yyyy", tôi muốn "2" và "yyyy" thay đổi nhưng "1" và "xxxx" không làm gì cả.

Tôi mới sử dụng jQuery.

Answer 1

Bạn có thể sử dụng

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

Bạn không phải sử dụng một mỗi vòng lặp để thêm dềnh. Nếu bạn có nhiều phần tử được chọn, nó sẽ áp dụng sự kiện trên tất cả các phần tử.

Có nói rằng, tôi đã tối ưu hóa một chút mã của bạn.

Tôi đã thêm chuột trên phụ huynh của đoạn văn, giống như bạn đã làm. Bằng cách sử dụng $(this) trong gọi lại của sự kiện, tôi thực sự có thể chọn phần tử được di chuột và áp dụng kiểu trên phần tử đó.

Vì tôi muốn kích thước phông chữ áp dụng cho đoạn văn, trước hết tôi chọn con mong muốn.

---

Tổng hợp trên lên:

• Tìm các yếu tố đoạn ($('p.hover'))
• Nhận nó phụ huynh, các li yếu tố (.parent())
• Áp dụng các sự kiện hover (.hover())

Sau khi sự kiện di chuột được gọi:

• Nhận yếu tố hiện tại ($(this))
• Tìm đoạn nội (.children('p'))
• Áp dụng phong cách

Answer 3

Chánh của <p> trong trường hợp của bạn là <li>. Bạn cần:

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