点击获取使用JavaScript的每个循环的下一次迭代

Question

当我点击下一个按钮时，需要通过迭代或通过纯JavaScript中的data-id获取每个循环的下一个div。

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>