移动从一个元件一类到另一个中的元素列表

Question

我想从一个元素设置active类到另一个元素的列表。为了获得元素列表中我用下面的代码：

$(document).on('click touchstart', 'button.previouslecture', function () {    
    var allchapters = $('div.chapter');
    console.log(allchapters);

    // todo: set previous lecture as active

});

$(document).on('click touchstart', 'button.nextlecture', function () {    
    var allchapters = $('div.chapter');
    console.log(allchapters);

    // todo: set next lecture as active

});

而这种代码返回下面的结果在控制台上：

现在了，我怎么写jQuery代码active类移动到前面或后面的元素中的元素列表。

更新

这里的HTML代码示例：

<ul class="list-unstyled">
    <li class="mb-2 section">
        <a href="#[email protected]" data-toggle="collapse" aria-expanded="false">
            Something
        </a>
        <ul class="list-group collapse" id="[email protected]">
            <li>
                <div class="chapter active">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
        </ul>
    </li>
    <li class="mb-2 section">
        <a href="#[email protected]" data-toggle="collapse" aria-expanded="false">
            Something
        </a>
        <ul class="list-group collapse" id="[email protected]">
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
        </ul>
    </li>
    <li class="mb-2 section">
        <a href="#[email protected]" data-toggle="collapse" aria-expanded="false">
            Something
        </a>
        <ul class="list-group collapse" id="[email protected]">
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
        </ul>
    </li>
    <li class="mb-2 section">
        <a href="#[email protected]" data-toggle="collapse" aria-expanded="false">
            Something
        </a>
        <ul class="list-group collapse" id="[email protected]">
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
        </ul>
    </li>
</ul>

Answer 1

• 移动的按钮外的声明
• 使用计数器
• 给了按钮的ID相同的类和测试

$(function() {
  var $allChapters = $('div.chapter'),
    cnt = 0;
  $(document).on('click touchstart', 'button.lecture', function() {
    $allChapters.eq(cnt).removeClass("active");
    cnt += $(this).is("#previouslecture") ? -1 : 1;
    if (cnt<0) cnt=0; // or set to $allChapters.length-1 to wrap
    if (cnt>=$allChapters.length) cnt--; // or set to 0 to wrap
    $allChapters.eq(cnt).addClass("active");
  });
});

.active { border:1px solid black } 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="previouslecture" class="lecture">Prev</button>
<button type="button" id="nextlecture"     class="lecture">Next</button>
<ul class="list-unstyled">
  <li class="mb-2 section" data-id="@item.Unit.Id">
    <a href="#[email protected]" data-toggle="collapse" aria-expanded="false">
            Something
        </a>
    <ul class="list-group collapse" id="[email protected]">
      <li>
        <div class="chapter active">
          <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
        </div>
      </li>
      <li>
        <div class="chapter">
          <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
        </div>
      </li>
      <li>
        <div class="chapter">
          <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
        </div>
      </li>
    </ul>
  </li>
  <li class="mb-2 section" data-id="@item.Unit.Id">
    <a href="#[email protected]" data-toggle="collapse" aria-expanded="false">
            Something
        </a>
    <ul class="list-group collapse" id="[email protected]">
      <li>
        <div class="chapter">
          <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
        </div>
      </li>
      <li>
        <div class="chapter">
          <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
        </div>
      </li>
      <li>
        <div class="chapter">
          <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
        </div>
      </li>
      <li>
        <div class="chapter">
          <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
        </div>
      </li>
    </ul>
  </li>
  <li class="mb-2 section" data-id="@item.Unit.Id">
    <a href="#[email protected]" data-toggle="collapse" aria-expanded="false">
            Something
        </a>
    <ul class="list-group collapse" id="[email protected]">
      <li>
        <div class="chapter">
          <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
        </div>
      </li>
      <li>
        <div class="chapter">
          <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
        </div>
      </li>
    </ul>
  </li>
  <li class="mb-2 section" data-id="@item.Unit.Id">
    <a href="#[email protected]" data-toggle="collapse" aria-expanded="false">
            Something
        </a>
    <ul class="list-group collapse" id="[email protected]">
      <li>
        <div class="chapter">
          <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
        </div>
      </li>
      <li>
        <div class="chapter">
          <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
        </div>
      </li>
      <li>
        <div class="chapter">
          <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
        </div>
      </li>
    </ul>
  </li>
</ul>

Answer 2

$(document).on('click touchstart', 'button.previouslecture', function () {    
    var all = $('div.chapter');
    var index = all.index(all.filter('.active'))
    if(index == 0)
    {
        alert('Already first');
                return;

    }
    
    var active = $('div.chapter.active');
    var next = all.eq(index-1);

    next.addClass('active')
    active.removeClass('active')

});

$(document).on('click touchstart', 'button.nextlecture', function () {    
    var all = $('div.chapter');
    var active = $('div.chapter.active');    
    var index = all.index(all.filter('.active'))
    if(index == all.length-1)
    {
        alert('Already last');
        return;
    }
    
    var active = $('div.chapter.active');
    var next = all.eq(index+1);
    
    next.addClass('active')
    active.removeClass('active')

});

.active{
background-color:gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-unstyled">
    <li class="mb-2 section" data-id="@item.Unit.Id">
        <a href="#[email protected]" data-toggle="collapse" aria-expanded="false">
            Something
        </a>
        <ul class="list-group collapse" id="[email protected]">
            <li>
                <div class="chapter ">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
            <li>
                <div class="chapter active">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
        </ul>
    </li>
    <li class="mb-2 section" data-id="@item.Unit.Id">
        <a href="#[email protected]" data-toggle="collapse" aria-expanded="false">
            Something
        </a>
        <ul class="list-group collapse" id="[email protected]">
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
        </ul>
    </li>
    <li class="mb-2 section" data-id="@item.Unit.Id">
        <a href="#[email protected]" data-toggle="collapse" aria-expanded="false">
            Something
        </a>
        <ul class="list-group collapse" id="[email protected]">
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
        </ul>
    </li>
    <li class="mb-2 section" data-id="@item.Unit.Id">
        <a href="#[email protected]" data-toggle="collapse" aria-expanded="false">
            Something
        </a>
        <ul class="list-group collapse" id="[email protected]">
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
        </ul>
    </li>
</ul>
<button class="previouslecture">Previous</button>
<button class="nextlecture">Next</button>