在下一个div上激活，在另一个删除上

Question

对于简单的滑块，我有此解决方案，但我需要像第一类.row一样保留类.active

按钮将切换.active类，就像第一类.row

当前，它仅切换到.row类，但我需要切换到.first和.second类。

这是我的实际解决方案：

$(function(){
$("#next").click(function(e) {
  var activeelement = $('.active');
  if(activeelement.next().length)
    activeelement.removeClass('active').next(".row").addClass('active');
  else
    activeelement.removeClass('active').closest('.main').find('> .row:first').addClass('active');
 });

$("#back").click(function(e) {
  var activeelement = $('.active');
  if(activeelement.prev().length)
activeelement.removeClass('active').prev().addClass('active');
  else
activeelement.removeClass('active').closest('.main').find('> .row:last').addClass('active');
 });
});

.main .row {
  display: none;
}
.main .row .active {
  color: blue;
}
.main .active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="main">
    <div class="row active">
      <div class="first active">sss</div>
      <div class="second active">ss</div>
    </div>
    <div class="row">
      <div class="first">sss2</div>
      <div class="second">ss</div>
    </div>
    <div class="row">
      <div class="first">sss3</div>
      <div class="second">ss</div>
    </div>
    <div class="row">
      <div class="first">sss4</div>
      <div class="second">ss</div>
    </div>
</div>

<a href="#" id="back">Back</a>
<a href="#" id="next">Next</a>

谢谢。

Answer 1

使用children()

$(function(){
$("#next").click(function(e) {
  var activeelement = $('.active');
  if(activeelement.next().length-1){
    activeelement.removeClass('active').next(".row").addClass('active').children().addClass('active').parent().prev(".row");
    activeelement.children().removeClass('active');
    }
  else{
    activeelement.removeClass('active').closest('.main').find('> .row:first').addClass('active').children().addClass('active');
    activeelement.children().removeClass('active');
    }
 });

$("#back").click(function(e) {
  var activeelement = $('.active');
  if(activeelement.prev().length-1){
  activeelement.removeClass('active').prev(".row").addClass('active').children().addClass('active');
    activeelement.children().removeClass('active');
    }
  else{
    activeelement.removeClass('active').closest('.main').find('> .row:last').addClass('active').children().addClass('active');
    activeelement.children().removeClass('active');
    }
 });
});

.main .row {
  display: none;
}
.main .row .active {
  color: blue;
}
.main .active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="main">
    <div class="row active">
      <div class="first active">sss</div>
      <div class="second active">ss</div>
    </div>
    <div class="row">
      <div class="first">sss2</div>
      <div class="second">ss</div>
    </div>
    <div class="row">
      <div class="first">sss3</div>
      <div class="second">ss</div>
    </div>
    <div class="row">
      <div class="first">sss4</div>
      <div class="second">ss</div>
    </div>
</div>

<a href="#" id="back">Back</a>
<a href="#" id="next">Next</a>