Question

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

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");


}

的 DEMO

Answer 2

你需要添加一张支票，看看你是在最后的兄弟姐妹还是步骤＆＃34;在这个过程中，如果是这样，则将DOM树遍历到包装器＆＃34;部分＆＃34;得到下一个＆＃34;部分＆＃34;并设置第一步＆＃34;步骤＆＃34;积极的

这样的事情应该起作用

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" )
    }
}

如何获得下一个元素，无论它是否是兄弟姐妹？

2 个答案: