Просмотров: 6 740

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

Вот несколько книг по Javascript и jQuery, которые могут быть полезными для вас:

07099997_cover-pdf-kniga-n-prohorenok-html-javascript-php-i-mysql-dzhentlmenskiy-nabor-web-mastera   12367630_cover-pdf-kniga-elizabet-robson-izuchaem-programmirovanie-na-javascript-9523650   01687985_cover-pdf-kniga-petr-tashkov-veb-mastering-na-100-html-css-javascript-php-cms-ajax-raskrutka