Работа с блоками только внутри родительского блока

[rolecs]

Здравствуйте, допустим на странице такая ситуация:

<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
<span class="knopka">Кнопка</span>
</div>

<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
<span class="knopka">Кнопка</span>
</div>

<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
<span class="knopka">Кнопка</span>
</div>

По нажатию на кнопку должны производится какие-то действия с child1 или child2, но они производятся сразу со всеми чайлдами на странице, как заставить скрипт выполнятся только в том блоке, в котором нажали на кнопку, а не со всеми блоками на странице?

[ksa]

как заставить скрипт выполнятся только в том блоке, в котором нажали на кнопку, а не со всеми блоками на странице?

Использовать для этого ссылку на родителя

$('.knopka').click(function (){
   $(this.parentNode).find('.child1');
});

[rolecs]

$('.knopka').click(function (){
   $(this.parentNode).find('.child1');
});

А как адаптировать это выражение под этот скрипт?

$(document).on("click",".knopka",function() {
  if ( $(".child1").css("overflow") == "hidden" ) {
$(".child1").css("overflow","visible");
$(".child1").css("height","auto");
} else if ( $(".child1").css("overflow") == "visible" ) {
$(".child1").css("overflow","hidden");
$(".child1").css("height","1");
}
});

[ksa]

А как адаптировать это выражение под этот скрипт?

Простой заменой

$(".child1")

на

$(this.parentNode).find('.child1')

Но если взглянуть поглубже...

$(document).on("click",".knopka",function() {
	var o=$(this.parentNode).find('.child1');
	if ( o.css("overflow") == "hidden" ) {
		o.css("overflow","visible");
		o.css("height","auto");
	} else if ( o.css("overflow") == "visible" ) {
		o.css("overflow","hidden");
		o.css("height","1");
	};
});

[rolecs]

$(this.parentNode).find('.child1')

Спасибо, работает!