jQuery：选择相邻的两个具有相同类的元素

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>

我正在寻找一种方法来选择前两个空闲座位（不包括"class taken"），给出的示例应该返回座位3+4。 是否有一种简单的方法可以选择可变数量的座位，例如选择相邻的4个座位？ 是否可以定义一个偏移量来确定搜索空闲座位的起始位置？我的意思是我想点击下一个按钮，它应该选择接下来的2个空闲座位（6+7）。 提前感谢。

- Fuxi

---

我建议你将它们成对分组，例如在<div class="pair_of_seats"><div class="seat taken">1</div><div class="seat">2</div></div>中。这样更容易搜索这些组，并检查其中一个座位是否未被占用，以及移动到下一组。但首先，请正确关闭标签按钮，好吗？ - Ed de Almeida

同时为这些组添加一个ID会使来回控制更加容易。 - Ed de Almeida

将它们添加到组中不起作用，因为如果您将椅子1和2组合在一起，那么您如何检查椅子2和3是否都未被占用？ - Glubus

你不会这样做的。我理解他想要找到两个连续的空闲座位，而不是其他的。如果要求是“任意两个有连续编号的座位”，那么就需要重新考虑了。@Fuxi，你怎么看？ - Ed de Almeida

选择4个相邻的座位，他的两个示例表明OP严格要求椅子直接相邻，但我现在看到了混淆。尽管如此，分组椅子并不比走过所有椅子并存储第一对空椅子更容易。 - Glubus

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;
    }
});

如果找到一对椅子，返回一个带有椅子的对象。

- Glubus

---

这种方法实在是太过取巧了，你应该重构你的代码，让你能够直接询问椅子它的邻居：chair.adjacentChairs。然后递归地搜索更大的组合。 - Glubus

Answer 2

您可以使用:not()伪类和方法.eq(), .nextUntil(),以及.addBack()来在一行代码中实现此操作：

$('.seat.taken + .seat:not(.taken)').eq(index).nextUntil('.taken').addBack()

值得一提的是，这个方法适用于不同长度的元素组（而不仅仅是两个元素的组）。

解释：

- 初始查询 $('.seat.taken + .seat:not(.taken)') 会选择没有 .taken 类的 .seat 元素，并且这些元素跟随一个带有 .seat 和 .taken 类的元素。 - .eq(index) 方法将根据 index 变量（其中 index 表示要选择哪个可用座位组）来缩小集合。 - .nextUntil('.taken') 方法将选择所有后续元素，直到另一个 .taken 元素。 - 然后使用 .addBack() 将初始元素添加回查询中。

基本示例：

var index = 0;
$('.next').on('click', function () {
  $('.seat.taken + .seat:not(.taken)').eq(index).nextUntil('.taken').addBack().toggleClass('selected');
  
  index++;
});

.selected { background-color: #f00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="next">next</button>
<div class="seats">
  <div class="seat taken">1</div>
  <div class="seat taken">2</div>
  <div class="seat">3 - Not taken</div>
  <div class="seat">4  - Not taken</div>
  <div class="seat taken">5</div>
  <div class="seat">6 - Not taken</div>
  <div class="seat">7 - Not taken</div>
  <div class="seat">8 - Not taken</div>
</div>

如果您想循环遍历元素，可以创建一个基本函数，根据索引返回一组可用座位：

function getNextGroup (index) {
  return $('.seat.taken + .seat:not(.taken)').eq(index).nextUntil('.taken').addBack();
}

然后，您可以调用该函数来确定index + 1是否产生任何元素。如果没有，则将index重置为0，如下面的示例所示：

更新示例：

var index = 0;
$('.next').on('click', function () {  
  $('.seat.selected').removeClass('selected');
  getNextGroup(index).toggleClass('selected');
  
  index = getNextGroup(index + 1).length ? index + 1 : 0;
});

function getNextGroup (index) {
  return $('.seat.taken + .seat:not(.taken)').eq(index).nextUntil('.taken').addBack();
}

.selected { background-color: #f00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="next">next</button>
<div class="seats">
  <div class="seat taken">1</div>
  <div class="seat taken">2</div>
  <div class="seat">3 - Not taken</div>
  <div class="seat">4  - Not taken</div>
  <div class="seat taken">5</div>
  <div class="seat">6 - Not taken</div>
  <div class="seat">7 - Not taken</div>
  <div class="seat">8 - Not taken</div>
  <div class="seat taken">9</div>
  <div class="seat taken">10</div>
  <div class="seat">11 - Not taken</div>
  <div class="seat">12 - Not taken</div>
  <div class="seat">13 - Not taken</div>
  <div class="seat">14 - Not taken</div>
  <div class="seat taken">15</div>
  <div class="seat">16 - Not taken</div>
</div>

- Josh Crozier

---

简洁明了的方法。注意：如果没有匹配到更多元素，您可以重置“索引”以便能够循环遍历这些元素。 - empiric