Как выполнить код отдельно в каждом блоке на JQUERY?

Question

[Владислав Калнаус]

Здравствуйте! Подскажите! Есть 5 блоков div, в каждом блоке есть"icon" и при нажатии кнопки мне надо взять "icon"и поместить в другой блок. Но нужно взять этот элемент с 1 блока, а не со всех.

<div class="modal-animators__item all-animators">
 <div class="icon">
<img src="img/animators/1.jpg" alt="">
</div>
<b class="title">Октонавты</b>
</div>

<div class="modal-animators__item all-animators">
 <div class="icon">
<img src="img/animators/1.jpg" alt="">
</div>
<b class="title">Октонавты</b>
</div>

<div class="modal-animators__item all-animators">
 <div class="icon">
<img src="img/animators/1.jpg" alt="">
</div>
<b class="title">Октонавты</b>
</div>

<div class="modal-animators__item all-animators">
 <div class="icon">
<img src="img/animators/1.jpg" alt="">
</div>
<b class="title">Октонавты</b>
</div>

<div class="modal-animators__item all-animators">
 <div class="icon">
<img src="img/animators/1.jpg" alt="">
</div>
<b class="title">Октонавты</b>
</div>

Comments

[Kovalsky]

В чем именно у вас возникла проблема, какой код получился у вас?

[Владислав Калнаус]

Никита Полевой:

$('.all-animators').on('click', function(){
	$('.modal-animators__list').removeClass('is-active');
	$('.form-for-animators').addClass('is-active');
	$('.icon').clone().appendTo('.align-left.img-animators');
});

Когда нахожу icon в блоке, то он вставляет все картинки со всех блоков ".all-animators", а мне нужно конкретного блока в котором происходит события клика

[Kovalsky]

Владислав Калнаус: обращайтесь к элементу, вот пример:

$( "p" ).on( "click", function() {
  alert( $( this ).text() );
});

В этом примере по клику на p вызывается alert с текстом этого элемента.

Answer 1

[Exploding]

$('.all-animators').on('click', function(){
  $('.modal-animators__list').removeClass('is-active');
  $('.form-for-animators').addClass('is-active');
  $(this).children('.icon').clone().appendTo('.align-left.img-animators');
});