Обратится к элементу по индексу JQ

Question

Ребят допустим у меня есть 10 блоков с классом block а так же 10 c классом block2, как сделать что б при нажатии на блоки с классом block над block2 происходило какое то событие к примеру добавлялся текст или изменялись стили не важно, я хочу знать как обращаться к элементам по индексу , к примеру нажимаю на block с индексом 1 , и у block2 с тем же индексом что то происходило, я уверен что многие из вас используют это на практике, так что прошу мне помочь

Answer 1

Примитивный пример. Думаю, объясняет принцип.

var clickable = $('.block1');
  var changed = $('.block2');
  clickable.on('click', function(){
    var n = clickable.index(this);
    changed.eq(n).html('Added');
    changed.eq(n).toggleClass('add');
});

.wrapp {
border: 2px dotted black;
width: 40%;
float: left;
margin: 10px;
}
.block1, .block2{
width: 100px;
height: 50px;
border: 2px solid black;
text-align: center;
font-size: 24px;
}
.block1:hover {
cursor: pointer;
}
.add {
background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapp">
  <div class="block1">1</div>
  <div class="block1">2</div>
  <div class="block1">3</div>
  <div class="block1">4</div>
  <div class="block1">5</div>
</div>
<div class="wrapp">
  <div class="block2">1</div>
  <div class="block2">2</div>
  <div class="block2">3</div>
  <div class="block2">4</div>
  <div class="block2">5</div>
</div>