nextTill & prevTill 关于一组组合元素

Question

我有一个动态创建的html，就像这样(简化的)

<div class="timeslots-container">
<div class="morning">
<h1 class="lined-h">Morning</h1>
<div class="row">
<div class="timeslot" id="timeslot-0">10:30</div>
<div class="timeslot" id="timeslot-1">11:00</div>
<div class="timeslot" id="timeslot-2">11:30</div>
</div>
</div>
<div class="day">
<h1 class="lined-h">Day</h1>
<div class="row">
<div class="timeslot" id="timeslot-3">12:00</div>
<div class="timeslot" id="timeslot-4">12:30</div>
<div class="timeslot timeslot-disabled" id="timeslot-5">13:00</div>
<div class="timeslot timeslot-disabled" id="timeslot-6">13:30</div>
<div class="timeslot timeslot-disabled" id="timeslot-7">14:00</div>
<div class="timeslot" id="timeslot-8">14:30</div>
<div class="timeslot" id="timeslot-9">15:00</div>
<div class="timeslot" id="timeslot-10">15:30</div>
<div class="timeslot" id="timeslot-11">16:00</div>
<div class="timeslot timeslot-disabled" id="timeslot-12">16:30</div>
<div class="timeslot timeslot-disabled" id="timeslot-13">17:00</div>
<div class="timeslot timeslot-disabled" id="timeslot-14">17:30</div>
</div>
</div>
</div>

这是一个表单，它有几个div按钮列表，其中一些按钮已禁用类。当鼠标悬停在div上时，我想突出显示一些按钮。要突出显示的div的数量是从服务器传输的。我可以这样做：

$(".timeslot").hover(function() {
if(!$(this).hasClass('timeslot-disabled')) {
$(this).nextUntil(".timeslot-disabled").slice(0,#{additional_slots}).addClass('timeslot-active');
var count = $(this).siblings('.timeslot-active').length;
$(this).prevUntil(".timeslot-disabled").slice(0,#{additional_slots}-count).addClass('timeslot-active');
}
});
$(".timeslot").mouseleave(function() {
$(this).siblings().removeClass('timeslot-active');
});

其中，#{additional_slots}是要突出显示的附加div的数量。

它有效，但仅在$(this)元素的父级中有效。由于样式和定位问题，我需要使用不同的容器，但我想将所有容器中的时隙div突出显示为一组。

我能像那样做吗

$timeslots = $('.timeslot);

然后用我的nextUntil和prevUntil从$(this)遍历那个集合？也许还有另一个更正确的解决方案？

第页。S.被禁用的元素的确切数量是动态分配的，通过Ajax从服务器传输，我不能依赖它。

第页。附言：如果我能解决这个问题，我还有另一个问题：如何确定鼠标点击时高亮显示的第一个时隙？我有可能解析id的最小值，但我怀疑这是正确的做法

Answer 1

我可以像$timeslots = $('.timeslot);一样执行此操作吗？然后用我的nextUntil和prevUntil从$(this)遍历该集合？

当然，您可以针对这种情况实现nextUntil和prevUntil：

var additional_slots = 1;
$(".timeslot").hover(function () {
var $this = $(this);
if (!$this.hasClass('timeslot-disabled')) {
$this.addClass('timeslot-active');
var $timeslots = $('.timeslot');
var $nexts = nextUntil(".timeslot-disabled", $this, $timeslots).slice(0, additional_slots);
$nexts.addClass('timeslot-active');
var count = $nexts.length;
var $prevs = prevUntil(".timeslot-disabled", $this, $timeslots).slice(0, additional_slots - count);
$prevs.addClass('timeslot-active');
}
function nextUntil(selector, $this, $timeslots) {
var index = $timeslots.index($this) + 1;
var result = [];
while (index < $timeslots.length && !$($timeslots[index]).hasClass('timeslot-disabled')) {
result.push($timeslots[index]);
index++;
}
return $(result);
}
function prevUntil(selector, $this, $timeslots) {
var index = $timeslots.index($this) - 1;
var result = [];
while (index >= 0 && !$($timeslots[index]).hasClass('timeslot-disabled')) {
result.push($timeslots[index]);
index--;
}
return $(result);
}
});
$(".timeslot").mouseleave(function () {
$(".timeslot").removeClass('timeslot-active');
});