计算另一个元素 Jquery 之间有多少项

Question

我有一个看起来像这样的列表：

<div class="container">
  <div class="item play">1</div>
  <div class="item do-not-play">2</div>
  <div class="item play">3</div>
  <div class="item play">4</div>
  <div class="item do-not-play">5</div>
  <div class="item do-not-play">6</div>
  <div class="item play">7</div>
</div>

我将如何计算每个play项目之间有多少类do-not-play项目？

例如，如果我单击项目 1，它将计算它找到多少个do-not-play，直到它到达项目 3，这将返回 1。

或者，如果我单击第 4 项，它将返回 2 do-not-play。

我的问题类似于这个问题：Jquery 计算 2 个元素之间的项目，但它们的问题略有不同。我没有 h1 标签来分隔我的列表项，只有播放和不播放项。

我怎样才能做到这一点？谢谢。

这是另一篇文章的答案，似乎我可以让它解决我的问题。

    $('.play').click(function () {
        alert($(this).first().nextUntil('play').length);
    });

Answer 1

您的问题在这里：

nextUntil('play')

您正在寻找一个类，因此请将上一行更改为：

nextUntil('.play')

$('.item').click(function () {
    console.log($(this).nextUntil('.play').length);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="item play">1</div>
    <div class="item do-not-play">2</div>
    <div class="item play">3</div>
    <div class="item play">4</div>
    <div class="item do-not-play">5</div>
    <div class="item do-not-play">6</div>
    <div class="item play">7</div>
</div>

Answer 2

避免每次点击都循环的不同方法

$(function() {
  var $lastPlayItem = "";
  var lastPlayIndex = -1;
  var $item = "";
  var $playButtons = $(".container .play");
  $.each($playButtons, function(i, item) {
    $item = $(item);
    if (i === 0) {
      lastPlayIndex = $item.index();
      $lastPlayItem = $item;
    }
    if ($item.index() > lastPlayIndex + 1) {
      $lastPlayItem.attr("data-count", $item.index() - lastPlayIndex - 1);
    }
    lastPlayIndex = $item.index();
    $lastPlayItem = $item;
  });
  $playButtons.click(function() {
    alert($(this).attr("data-count") || 0);
  });
})

.item {
  border: 1px solid green;
  margin: 5px;
}
.item.play:hover {
  cursor: pointer;
  background-color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="container">
  <div class="item do-not-play">2</div>
  <div class="item play">-1 Play</div>
  <div class="item do-not-play">2</div>
  <div class="item play">1 Play</div>
  <div class="item do-not-play">2</div>
  <div class="item play">3 Play</div>
  <div class="item play">4 Play</div>
  <div class="item do-not-play">5</div>
  <div class="item do-not-play">6</div>
  <div class="item play">7 Play</div>
</div>