jQuery:选择具有相同类的彼此相邻的2个元素

Question

这是我的标记:

<button>next</button
<div class="seats">
  <div class="seat taken">1</div>
  <div class="seat taken">2</div>
  <div class="seat">3</div>
  <div class="seat">4</div>
  <div class="seat taken">5</div>
  <div class="seat">6</div>
  <div class="seat">7</div>
  <div class="seat taken">8</div>
  <div class="seat taken">9</div>
</div>

我正在寻找一种方法来选择前 2 个空闲座位(没有“已参加”类(class))，给定的示例应返回座位 3+4。 是否有一种简单的方法来拥有可变数量的座位，例如。选择 4 个相邻的座位？ 是否可以定义从哪里开始搜索空闲座位的偏移量？我的意思是我想点击下一个按钮，它应该选择接下来的 2 个空闲座位 (6+7)。 提前致谢。

Answer 1

假设您被允许并且能够向每把椅子添加更多信息:我会扩展您当前的 html，使其看起来像这样:

<button>next</button>
<div class="seats">
  <div class="seat taken" data-chairNumber="0">1</div>
  <div class="seat taken" data-chairNumber="1">2</div>
  <div class="seat" data-chairNumber="2">3</div>
  <div class="seat" data-chairNumber="3">4</div>
  <div class="seat taken" data-chairNumber="5">5</div>
  <div class="seat" data-chairNumber="6">6</div>
  <div class="seat" data-chairNumber="7">7</div>
  <div class="seat taken" data-chairNumber="8">8</div>
  <div class="seat taken" data-chairNumber="9">9</div>
</div>

然后使用 jQuery 只选择未占用的椅子:

var chairs = $(".seat:not(.taken)");

然后走过这些椅子并检查是否存在一对(可能会扩展此以获得更大的组合):

var chairs = $(".seat:not(.taken)");
var currentChair = -2; //idunnkno
$.each(chairs, function(chair) {
    var chairnumber = $(chair).data("chairNumber");
    if(chairnumber - 1 === currentChair)
    {
         return { chairA : currentChair, chairB : chairNumber };
    }
    else {
         currentChair = chairnumber;
    }
});

如果找到一对，请归还与椅子一起的元素。