jQuery:选择具有相同类的两个相邻元素 [英] jQuery: selecting 2 elements next to each other with same class

问题描述

这是我的标记:

<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). 预先感谢.

i'm looking for a way to select the first 2 free seats (which don't have class "taken"), given example should return seat 3+4. would there be an easy way to have a variable amount of seats, eg. selecting 4 seats next to each other? is it possible defining a offset where to start searching free seats? i mean i want to hit the next button and it should pick the next 2 free seats (6+7). thanks in advance.

推荐答案

您可以利用 :not()伪类和方法 .eq() ， .nextUntil() 和

You could utilize the :not() pseudo-class and the methods .eq(), .nextUntil(), and .addBack() in order to achieve this in a single line:

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

还值得指出的是，这将适用于长度可变的元素组(而不仅仅是两个元素的组).

It's also worth pointing out that this will work for groups of elements of varying lengths (not just groups of two elements).

说明:

• 初始查询$('.seat.taken + .seat:not(.taken)')将选择不具有.taken类的.seat元素，该元素紧随具有.seat和.taken类的元素.

• The initial query, $('.seat.taken + .seat:not(.taken)') will select .seat elements without a class of .taken that follow an element with the classes .seat and .taken.

.eq(index)方法将基于index变量(其中index表示您要选择的一组可用座位)来缩小集合.

The .eq(index) method will reduce the set based on the index variable (where index denotes which group of available seats that you want to select).

.nextUntil('.taken')方法将选择以下所有元素，直到另一个.taken元素.

The .nextUntil('.taken') method will select all the following elements until another .taken element.

然后使用.addBack()将初始元素添加回查询中.

Then the initial element is added back to the query with .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>

如果要在元素之间循环，则可以创建一个基本函数，该函数根据索引返回一组可用座位:

And if you want to cycle through the elements, you could create a basic function that returns a group of available seats based on the index:

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

然后，您可以调用该函数以确定index + 1是否产生任何元素.如果没有，那么您可以像下面的示例一样将index重置为0:

Then you can call the function to determine if index + 1 yields any elements. If it doesn't, then you would reset index back to 0 like in the example below:

更新的示例:

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:选择具有相同类的两个相邻元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！