Особенности выборки элементов массива в jQuery

[сфздщсл]

$('.underLine:eq(0)').on('click', function(e){
$('.itemsWrap:eq(0)').addClass("zoomIn open").removeClass("zoomOut closE");
});

$('.underLine:eq(1)').on('click', function(e){
$('.itemsWrap:eq(1)').addClass("zoomIn open").removeClass("zoomOut closE");
});

$('.underLine:eq(2)').on('click', function(e){
$('.itemsWrap:eq(2)').addClass("zoomIn open").removeClass("zoomOut closE");
});

$('.underLine:eq(3)').on('click', function(e){
$('.itemsWrap:eq(3)').addClass("zoomIn open").removeClass("zoomOut closE");
});


Как заставить обработчик событий отслеживать элемент на котором случилось событие без перечисления их индексов,т.е чтоб он сам определил его и применил событие только к нему не затрагивая другие элементы этого массива???

[Deff]

сфздщсл,
Выложите лучше HTML кликабельных и обрабатываемых элементов
Ибо много текста у Вас

[сфздщсл]

<div class="underLine"></div>
<div class="itemsWrap animated">
.................................................. .......
</div>
<div class="underLine"></div>
<div class="itemsWrap animated">
.................................................. .......
</div>
<div class="underLine"></div>
<div class="itemsWrap animated">
.................................................. .......
</div>


Кликабельный очень большой.Принцип такой-при клике на underLine раскрывается itemsWrap.Я просто не могу понять как заставить сработать событие на конкретном underLine.

[Deff]

$('.underLine').on('click', function(){
//Не пому нафиг надо переключать четыре класса ?
$(this).next().toggleClass('zoomIn open').toggleClass('zoomOut closE').toggle();
});

Типично переключается единственный класс
Доcтаточно для любых css манипуляций, посколь есть псевдо-класс not:active
$('.underLine').on('click', function(){
$(this).next().toggleClass('active').toggle();
});

[сфздщсл]

Задача не в том,чтоб переключить 4 класса.Нужно заставить переключение срабатывать не на всех элементах класса underLine,а на том на который в конкретный момент кликнули и применить функцию к только к его дочернему элементу itemsWrap не задевая остальные.

[Deff]

сфздщсл,
Вы оттестили выданный код ? (вместо Вашего длинного ) Дайте ссылку на демку

[сфздщсл]

$('.underLine').on('click', function(){
$(this).next().addClass('zoomIn open');
});

В таком виде работает.Я так понимаю .next() выбирает следующий элемент в DOM?А как быть в случае если он не следующий?

[Deff]

Я так понимаю .next() выбирает следующий элемент в DOM?
Да следущий,
А как быть в случае если он не следующий?
Приводите реальный HTML код и описывайте задачу.
Посмотрите справочник: http://jquery.page2page.ru/index.php5/Заглавная_страница
- Слево: карта функций для начала: Cелекторы и Работа с набором
Вообще для jQuery есть свой раздел тут на форуме: http://javascript.ru/forum/jquery/

[сфздщсл]

Благодарю Вас.Вы мне очень помогли.

[kostyanet]

Местные специалисты называют этот прием - делегирование.

Надо просто по event.target получать элемент который щелкнули внутри элемента который прослушивается.