JQuery - 单击按钮后如何检查特定的类值是否在第一个孩子身上

Question

JQuery - 单击按钮后如何检查特定类的值是否在第一个子项上

我有这样的代码：

<div class="carousel-item active">...</div>
<div class="carousel-item">...</div>
<div class="carousel-item">...</div>
<div class="carousel-item">...</div>
<div class="carousel-item">...</div>
<div class="carousel-item">...</div>

在网页上，有一个按钮。当用户单击此按钮时，“活动”值将移动到下一个孩子。像这样：

<div class="carousel-item">...</div>
<div class="carousel-item active">...</div>
<div class="carousel-item">...</div>
<div class="carousel-item">...</div>
<div class="carousel-item">...</div>
<div class="carousel-item">...</div>

我想编写代码来检查单击此按钮后，“活动”值是否放置在第一个孩子（具有“轮播项目”值）上。

$('.button').click(function() {
If(//Check that "active" value is on the first child or not, return true if "active" value is on first child){
//Do something here
}
}

我尝试将 find(), :first-child 与我的代码混合使用，但它不起作用。

提前致谢。

Answer 1

您可以创建一个函数来获取活动索引，并创建另一个函数将其移动到下一个子节点，如下所示：

function getActiveIndex(){
  var activeIndex = 0;
  var count = 0;
  $('.carousel-item').each(function(){
    count++;
    if($(this).hasClass('active')){
      activeIndex = count;
    }
  });
  return activeIndex;
}

function moveActiveIndex(){
  var activeIndex = getActiveIndex();
  $('.carousel-item:nth-of-type('+activeIndex+')').removeClass('active');
  activeIndex++;
  $('.carousel-item:nth-of-type('+activeIndex+')').addClass('active');
}

.carousel-item {
  background-color: gray;
  border: 1px solid #ddd;
}

.carousel-item.active {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

<div class="carousel-item active">...</div>
<div class="carousel-item">...</div>
<div class="carousel-item">...</div>
<div class="carousel-item">...</div>
<div class="carousel-item">...</div>
<div class="carousel-item">...</div>

<button type="button" onclick="moveActiveIndex()">Move Active</button>

Answer 2

简单的jquery：

if( $(".carousel-item").first().hasClass("active") ){
   // do something
}