jQuery - Как применить addClass только к текущему экземпляру?

Question

У меня есть этот код, появляющийся сотни раз на странице:

<div class="container"> 
<div class="containerbutton"></div> 
<div class="containercontent">content</div> 
</div> 

<div class="container"> 
<div class="containerbutton"></div> 
<div class="containercontent">content</div> 
</div> 

<div class="container"> 
<div class="containerbutton"></div> 
<div class="containercontent">content</div> 
</div> 

Я пытаюсь добиться этого: всякий раз, когда «containerbutton» завис, я хочу «containercontent» DIV под ним, чтобы показать и иметь к нему применяется класс displayclass. Однако прямо сейчас, в любое время, когда я навешиваю над div «containerbutton», на дисплее страницы отобразится ALL «containercontent». Как настроить таргетинг только на текущую зависающую кнопку?

Вот сценарий, я работаю с:

<script> 
jQuery(document).ready(function() { 

$(".container .containerbutton").hover(function() { 
    $(".containercontent").addClass('displayclass'); 
    }, function(){ 
    $(".containercontent").removeClass('displayclass'); 
}); 

}); 
</script> 

Answer 1

Вы должны использовать this ссылку, чтобы получить текущий элемент парил

jQuery(document).ready(function() { 
 

 
$(".container .containerbutton").hover(function() { 
 
    $(this).next().addClass('displayclass'); 
 
    }, function(){ 
 
    $(this).next().removeClass('displayclass'); 
 
}); 
 

 
});

.displayclass{ 
 
    display : none; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="container"> 
 
<div class="containerbutton">1</div> 
 
<div class="containercontent">content</div> 
 
</div> 
 

 
<div class="container"> 
 
<div class="containerbutton">2</div> 
 
<div class="containercontent">content</div> 
 
</div> 
 

 
<div class="container"> 
 
<div class="containerbutton">3</div> 
 
<div class="containercontent">content</div> 
 
</div>