thêm lớp học cho trẻ em này

Question

Mã này không hoạt động. this+'>a' không phải là cú pháp hợp lệ. Vì vậy, làm cách nào để thêm/xóa lớp học ở con của this? Trong trường hợp này, phần tử a.

jQuery(function ($) { 
     $("nav.menu>ul>li").hover(
      function() { 
       $(this+'>a').addClass("hover_triangle");//error 
      }, 

      function() { 
       $(this+'>a').removeClass("hover_triangle");//error 
      }); 
    }); 

Tôi không thể làm nav.menu>ul>li>a vì sẽ chọn tất cả a yếu tố trong menu.

Answer 1

$(this).children('a').addClass('hover_triangle'); 

và với mã đầy đủ:

jQuery(function($) { 
    $('nav.menu>ul>li').hover(function() { 
     $(this).children('a').addClass('hover_triangle'); 
    },function() { 
     $(this).children('a').removeClass('hover_triangle'); 
    }); 
}); 

Answer 2

$('a', this) cho phép bạn tìm kiếm chỉ bên trong của đối tượng this

jQuery(function ($) { 
    $("nav.menu>ul>li").hover(
     function() { 
      $('a', this).addClass("hover_triangle");//error 
     }, 

     function() { 
      $('a', this).removeClass("hover_triangle");//error 
     }); 
}); 

Answer 3

$(this).find('a').addClass('hover_triangle') - cách phổ biến hơn bacause nó không phải là cần thiết để có một đứa trẻ trực tiếp

Answer 4

Bạn có thể sử dụng .find()

$(this).find('> a').addClass("hover_triangle"); 

này sẽ chỉ truy cập vào phần tử con trực tiếp của nav.menu>ul>li

CHECK FIDDLE

Nếu bạn muốn chỉ cần chọn những đứa trẻ ngay lập tức .find('a') sẽ nhận được ngay cả những neo lồng nhau .. Để tránh điều đó bạn cần để sử dụng hoặc .find('> a') hoặc .children('a')

Answer 5

Có 2 phương pháp để tìm kiếm hậu duệ của this. Hầu hết đã trả lời bằng find() (và dễ đọc hơn) nhưng bộ chọn lọc cũng có thể có một khung hình thứ hai là context.

$('a', this) là một cú pháp khác và giống như cú pháp $(this).find('a). Internallly jQuery sẽ có những trường hợp đầu tiên và sử dụng find() dù sao, nhưng cú pháp là hợp lệ và nhiều sử dụng nó

API refrence: jQuery(selector [, context])