Просмотров: 11 561

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');
});

Кстати, хотите узнать есть ли смысл в каком-то элементе на вашем сайте с помощью «целей» Яндекс Метрики и Google Analytics?

Уберите то, что НЕ работает, добавьте то, что работает и удвойте вашу выручку.

Курс по настройке целей Яндекс Метрики..

Курс по настройке целей Google Analytics..

  • Tom

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