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

267

12 ноября 2017, 18:11

Ребят допустим у меня есть 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>