Выберите текущий элемент JQuery - несколько дивы

Question

Я новичок с JQuery, и я пытаюсь понять, как я могу парить текущий элемент в моей ситуации:

<div class="feat_pic"> 
    <div class="feat_bg_img" style="background-image: url(<?php echo $src[0]; ?>);"><div class="layer"></div></div> 
    <a class="home-feat-title" href="<?php the_permalink(); ?>"><?php get_the_title() ? the_title() : the_ID(); ?></a> 
</div> 

<div class="feat_pic"> 
    <div class="feat_bg_img" style="background-image: url(<?php echo $src[0]; ?>);"><div class="layer"></div></div> 
    <a class="home-feat-title" href="<?php the_permalink(); ?>"><?php get_the_title() ? the_title() : the_ID(); ?></a> 
</div> 

<div class="feat_pic"> 
    <div class="feat_bg_img" style="background-image: url(<?php echo $src[0]; ?>);"><div class="layer"></div></div> 
    <a class="home-feat-title" href="<?php the_permalink(); ?>"><?php get_the_title() ? the_title() : the_ID(); ?></a> 
</div> 

Я знаю, что я несколько близко к тому, что я хочу acomplish, вот код:

$(".feat_pic").hover(function(){ 
     $(".home-featured ul li .feat_container ul li .feat_bg_img .layer").addClass("lilith"); 
     $(".home-featured ul li a.home-feat-title").addClass("satan"); 
    }, function(){ 
     $(".home-featured ul li .feat_container ul li .feat_bg_img .layer").removeClass("lilith"); 
     $(".home-featured ul li a.home-feat-title").removeClass("satan"); 
    }); 

Как я могу сделать что add.Class работать только на текущем .feat_pic?

Answer 1

Вы можете использовать this внутри обработчика событий, чтобы обратиться к парил feat_pic элемента, то вы можете использовать .find() найти .layer и .home-feat-title элемент внутри него, как

$(".feat_pic").hover(function() { 
    $(this).find(".feat_bg_img .layer").addClass("lilith"); 
    $(this).find("a.home-feat-title").addClass("satan"); 
}, function() { 
    $(this).find(".feat_bg_img .layer").removeClass("lilith"); 
    $(this).find("a.home-feat-title").removeClass("satan"); 
}); 

Демо: Fiddle

Answer 2

$(".feat_pic").hover(function(){ 
    var me = $(this); // current .feat_pic 
    me.addClass('className'); 
    $(".home-featured ul li .feat_container ul li .feat_bg_img .layer").addClass("lilith"); 
    $(".home-featured ul li a.home-feat-title").addClass("satan"); 
}, function(){ 
    $(".home-featured ul li .feat_container ul li .feat_bg_img .layer").removeClass("lilith"); 
    $(".home-featured ul li a.home-feat-title").removeClass("satan"); 
}); 

Answer 3

Вы можете использовать «это» вместо указания имени класса в вашем случае

$(this).hover(function(){ 
    $(".home-featured ul li .feat_container ul li .feat_bg_img .layer").addClass("lilith"); 
    (".home-featured ul li a.home-feat-title").removeClass("satan"); 
});