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