如何获得下一个元素，而不管它是否是同级元素？

Question

我正在使用$(elm).next().addClass( "currentStep" ); 在元素单击时，但是一旦它碰到了最后一个兄弟，我希望它转到下一个div容器。 我怎么做？

这是JSFiddle 。

 function clicked(elm) { $(elm).removeClass("currentStep"); $(elm).next().addClass("currentStep"); } 

 .currentStep { border: 1px dashed #6e6e6e; background-color: rgba(217, 233, 244, 0.4); } 

 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> <link rel="stylesheet" type="text/css" href="/css/result-light.css"> <div class="single-task-widget"> <div class="widget-header"> <p>Section 1</p> <h4>Create</h4> </div> <button class="collapse-btn"><i class="fa fa-angle-down fa-angle-up"></i></button> <div class="task-wrapper collapsed"> <ul class="task-list"> <li onclick="clicked(this);" id="s1s1"><span>Click</span><b>File</b><span class="status"></span></li> <li onclick="clicked(this);" id="s1s2" class="currentStep"><span>Click</span><b>New</b><span class="status"></span></li> <li onclick="clicked(this);" id="s1s3" class=""><span>Select</span><b>International Paper</b><span class="status"></span></li> <li onclick="clicked(this);" id="s1s4" class=""><span>Select</span><b>Paper Size: A3</b><span class="status"></span></li> <li onclick="clicked(this);" id="s1s5" class=""><span>Type</span><b>72</b><span class="status"></span></li> <li onclick="clicked(this);" id="s1s6" class=""><span>Click</span><b>Ok</b><span class="status"></span></li> </ul> </div> <div class="progress-bar"> <div class="progress"></div> </div> </div> <div class="single-task-widget"> <div class="widget-header"> <p>Section 2</p> <h4>Resize</h4> </div> <button class="collapse-btn"><i class="fa fa-angle-down fa-angle-up"></i></button> <div class="task-wrapper collapsed"> <ul class="task-list"> <li onclick="clicked(this);" id="s2s1"><span>Click</span><b>Image</b><span class="status"></span></li> <li onclick="clicked(this);" id="s2s2"><span>Click</span><b>Image Size</b><span class="status"></span></li> <li onclick="clicked(this);" id="s2s3"><span>Type</span><b>1000</b><span class="status"></span></li> <li onclick="clicked(this);" id="s2s4"><span>Type</span><b>800</b><span class="status"></span></li> <li onclick="clicked(this);" id="s2s5"><span>Click</span><b>Ok</b><span class="status"></span></li> </ul> </div> </div> 

Answer 1

可以使用索引和eq()代替next()

function clicked(elm) {

  var $tasks = $('.task-list li'),
    currentIndex = $tasks.index(elm);

  $tasks.eq(currentIndex + 1).addClass("currentStep")
  $(elm).removeClass("currentStep");


}

演示

Answer 2

您需要添加检查以查看您是否处于该过程的最后一个同级或“步骤”中，如果是这样，则将DOM树遍历到包装器“节”中，获取下一个“节”并将第一个“步骤”设置为活性

这样的事情应该工作

function clicked(elm) {
    // remove for ALL to avoid duplicates if a step is skipped
    $('.currentStep').removeClass( "currentStep" );
      // will return 0 if it is the last
    if ($(elm).next().length) {
        $(elm).next().addClass( "currentStep" );
    } else {
        // get the wrapper and find the next -> set first as active
        $(elm).parents('.single-task-widget').next().find('.task-list li:first-child').addClass( "currentStep" )
    }
}