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个免费座位（没有“被采取”等级），例如应该返回座位3 + 4。会有一个简单的方法来获得可变数量的座位，例如。选择4个座位彼此相邻？是否可以定义偏移量从何处开始搜索免费座位？我的意思是我想点击下一个按钮，它应该选择接下来的2个免费座位（6 + 7）。提前谢谢。

Answer 1

假设您已经允许并且能够为每位主席添加更多信息：我会扩展您当前的HTML，使其看起来像这样：

viewDidLoad

然后使用jQuery仅选择未拍摄的椅子：

<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>

然后走过这些椅子，检查是否存在一对（可能会扩展这个更大的组合）：

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

如果找到一对，请用椅子返回一个物体。

Answer 2

您可以使用:not() pseudo-class和方法.eq()，.nextUntil()和.addBack()来实现这一目标：

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

值得指出的是，这将适用于不同长度的元素组（不仅仅是两个元素的组）。

<强>解释

初始查询$('.seat.taken + .seat:not(.taken)')将选择.seat个元素而不包含.taken类，其后面的元素包含.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>

jQuery：使用相同的类选择彼此相邻的2个元素

2 个答案: