Просмотров: 9 340

jQuery. Как выбрать элемент внутри конструкции this.

Предположим, что на странице располагается вот такая структура:

<ul>
<li class="level">
	<ul>
	<li>Уровень 1</li>
	<li>Уровень 1</li>
	</ul>
</li>
<li class="level">
	<ul>
	<li>Уровень 2</li>
	<li>Уровень 2</li>
	</ul>
</li>
</ul>

Задача в том, чтобы при клике по элементу с классом «level» вложенные в него списки, по клику, то появлялись, то исчезали.

Выглядит это вот так:

Вся трудность здесь заключается в выборе элемента ul именно у того элемента li, по которому произведен клик. Если бы у них были разные классы, то здесь особых проблем бы не было. Вся трудность в том, что классы одинаковые.

С такой задачей можно часто сталкиваться, когда какая-то информация на веб-странице у вас выводится в цикле и изменять для него имя класса не всегда хорошая идея.

Итак, для того, чтобы решить эту задачу, нужно воспользоваться селектором this и следующими операторами:

$(".level").on("click", function() {
$(this).find('ul').toggle('slow');
});

можно также написать так:

$(".level").on("click", function() {
$(this,'ul').toggle('slow');
});

либо вы можете использовать такую форму записи.

$(".level").on("click", function() {
$(this).children('ul').toggle('slow');
});

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

Обучающий курс для начинающих по основам работы с веб-аналитикой сайтов на системе Яндекс Метрика здесь.

Страница с описанием моих услуг по веб-аналитике: здесь.

  • Tom

    Здравствуйте, а можно узнать почему если передать в вызываемую функцию event и вместо this поставить event.target, то работать будет только по нажатию черного кружка? как я понимаю target возвращает элемент, являющийся источником события, то по идее должно быть всё тоже самое