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

[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')

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

$(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')

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

$(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");
};
});


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