Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Работа с блоками только внутри родительского блока (https://javascript.ru/forum/jquery/46449-rabota-s-blokami-tolko-vnutri-roditelskogo-bloka.html)

rolecs 10.04.2014 14:07
Работа с блоками только внутри родительского блока
 
Здравствуйте, допустим на странице такая ситуация:

<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 10.04.2014 14:10
Цитата:
Сообщение от rolecs
как заставить скрипт выполнятся только в том блоке, в котором нажали на кнопку, а не со всеми блоками на странице?
Использовать для этого ссылку на родителя

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

rolecs 10.04.2014 14:25
Цитата:
Сообщение от ksa (Сообщение 307096)
Использовать для этого ссылку на родителя

$('.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 10.04.2014 14:52
Цитата:
Сообщение от rolecs
А как адаптировать это выражение под этот скрипт?
Простой заменой
Цитата:
Сообщение от rolecs 
$(".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 10.04.2014 15:00
Цитата:
Сообщение от ksa (Сообщение 307103)
Простой заменой

на 
$(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");
	};
});
Спасибо, работает!


Часовой пояс GMT +3, время: 01:41.