Как правильно использовать this в javascript?

Question

[Хабиб Омаров]

Есть такой HTML код

<div class="coment-count">Коментарий - 2</div>
<div class="zametki-comm">
     <ul class="zamet-comm">
          <li>........</li>
          <li>........</li>
     <ul>
<div class="formadd">
код формы добавления
</div>
</div>

хочу сделать чтоб при клике на coment-count скрывался блок zametki-comm.
Дело в том что на странице такая структура комментарий не одна, а несколько

$(function(){
$('.coment-count').click(function() {
      $('.zametki-comm').slideToggle(500);
    });
})

Мой скрипт скрывает и показывает все подряд разом, а я хочу чтоб по одному скрывало.

Answer 1

[Сева]

$('.coment-count').on('click', function() {
	$('+ .zametki-comm', this).slideToggle(500);
});

Comments

[Хабиб Омаров]

просто супер, как она именно работает можешь обьяснить

[Сева]

Все как в CSS, + .zametki-comm означает блок zametki-comm, расположенный сразу же после блока, на котором обработчик

[Хабиб Омаров]

блин все так просто чтоли было

[Евгений Петров]

А еще лучше использовать делегирование, а не заниматься лишним траверсом

$(document).on('click', '.coment-count', function (e) {
// А дальше или как @Zewkin, или как @k12th
});

Answer 2

[Константин Китманов]

Малоизвестная фича jQuery — передавать в обработчики событий первым аргументом объект события.
Еще более скрытая фича событий — наличие поля target, в котором содержится элемент, на котором событие произошло.

Заюзав эту продвинутую магию, получим:

$('.comment-count').on('click', function(event) {
        $(event.target).next('.zametki-comm').slideToggle(500);
});

А впрочем, можно и как @Zewkin предложил.

Answer 3

[Александр Таратин]

$('.coment-count').on('click', function() {
	$(this).next().slideToggle(500);
});

Answer 4

[Дмитрий Клусевич]

$('.coment-count').each(function(){
var self = $(this);
self.on('click', function(){
self.next().slideToggle(500)
})
})

Answer 5

[Денис Инешин]

Как то так