クリックすると、JavaScriptを使用して各ループで次の繰り返しを取得します。

Question

次のボタンをクリックすると、繰り返しごとに次のdivを取得するか、純粋なJavaScriptのdata-idで取得する必要があります。

var stepsWrp = document.querySelectorAll('.stepWrp'); 
 

 
stepsWrp.forEach(function(item, index){ 
 

 
\t item.addEventListener('click', function (event) { 
 
\t \t if (event.target.nodeName === 'BUTTON' && 
 
\t \t \t event.target.innerText === 'Next' && 
 
\t \t \t event.target.classList.contains('nextBtn') 
 
\t \t \t) { \t \t \t \t 
 

 

 
\t \t \t  
 
\t \t } 
 
}) 
 
})

.stepWrp { 
 
display:inline-block; 
 
width:100px; 
 
height:100px; 
 
border:1px solid #ccc; 
 
} 
 
.active { 
 
border:1px solid red; 
 
}

<div class="stepWrp" data-id="1"> 
 
    text content 1 
 
    <button class="nextBtn">Next</button> 
 
</div> 
 
<div class="stepWrp" data-id="2"> 
 
    text content 2 
 
    <button class="nextBtn">Next</button> 
 
</div> 
 
<div class="stepWrp" data-id="3"> 
 
    text content 3 
 
    
 
</div>

Answer 1

ので、クリックされたものの後の要素を参照するためにnode.nextSiblingまたはnode.nextElementSiblingを使用しています。

var stepsWrp = document.querySelectorAll('.stepWrp'); 
 
stepsWrp.forEach(function(item, index) { 
 
    item.addEventListener('click', function(event) { 
 
    console.log(item.nextElementSibling) 
 
    }) 
 
})

.stepWrp { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid #ccc; 
 
} 
 

 
.active { 
 
    border: 1px solid red; 
 
}

<div class="stepWrp" data-id="1"> 
 
    text content 1 
 
    <button class="nextBtn">Next</button> 
 
</div> 
 
<div class="stepWrp" data-id="2"> 
 
    text content 2 
 
    <button class="nextBtn">Next</button> 
 
</div> 
 
<div class="stepWrp" data-id="3"> 
 
    text content 3 
 

 
</div>