javascript - 如何检查单击的元素是在当前事件元素之前还是之后

Question

我有一个列表项，第一个已经有 .active 类。

当我点击其他列表项时，.active 类移动到那个被点击的元素。

但问题是，我无法检测我点击的元素是在前一个 .active 元素之前还是之后。

这是脚本

$(document).ready(function(){
  var $li = $("li");

  $li.each(function(){
    $(this).click(function(){
      $li.removeClass("active");
      $(this).addClass("active");
      
      if($("li.active").next($(this))){
      		$("span").text("after clicked element");
      } else {
      		$("span").text("before clicked element");
      }
    })
  })
})

li.active {
  background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="active">Check 1</li>
  <li>Check 2</li>
  <li>Check 3</li>
  <li>Check 4</li>
</ul>

<span></span>

这是 fiddle

Answer 1

为此，您可以检查 if 语句中相关元素的 index()。另请注意，each() 语句是多余的。试试这个:

$(document).ready(function() {
  $("li").click(function() {
    var activeIndex = $('li.active').removeClass('active').index();
    var thisIndex = $(this).addClass('active').index();

    if (activeIndex < thisIndex) {
      $("span").text("after active element");
    } else if (activeIndex > thisIndex) {
      $("span").text("before active element");
    } else {
      $('span').text('same element');
    }
  })
})

li.active {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="active">Check 1</li>
  <li>Check 2</li>
  <li>Check 3</li>
  <li>Check 4</li>
</ul>

<span></span>