Javascript 下一步&；组合元素集上的Previous

我有这样一个动态创建的html（简化）

其中#{additional_slots}是要高亮显示的附加div的数量

它可以工作，但只能在$（this）元素的父元素中工作。由于样式和定位问题，我需要使用不同的容器，但我希望将所有容器中的时隙div作为一组突出显示

我可以这样做吗

$timeslots = $('.timeslot);

在那次从$（this）到我的nextUntil和prevUntil的遍历之后？也许还有另一个更正确的解决方案

另外，被禁用的元素的确切数量是动态分配的，通过Ajax从服务器传输，我不能依赖于此

如果我能解决这个问题，我还有另一个问题：如何确定鼠标点击时突出显示的第一个时间段？我可能可以解析ID的最小值，但我怀疑这样做是否正确

我可以像

$timeslot=$（'.timeslot）那样做吗之后，从$（this）开始，用我的nextUntil和prevUntil遍历该集合

当然，对于这种情况，您可以执行
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');
});

var附加_插槽=1；
$（“.timeslot”）.hover（函数（）{
var$this=$（this）；
if（！$this.hasClass（'timeslot-disabled'））{
$this.addClass（'timeslot-active'）；
var$timeslot=$（'.timeslot'）；
var$nexts=nextUntil（“.timeslot disabled”，$this，$timeslot）.slice（0，额外的\u插槽）；
$nexts.addClass（'timeslot-active'）；
变量计数=$nexts.length；
var$prevs=prevUntil（“.timeslot disabled”，$this，$timeslot）.slice（0，额外的\u插槽-计数）；
$prevs.addClass（'timeslot-active'）；
}
函数nextUntil（选择器，$this，$timeslot）{
var index=$timeslots.index（$this）+1；
var结果=[]；
while（索引<$timeslots.length&&！$（$timeslots[index]）.hasClass（'timeslot-disabled'））{
结果推送（$timeslots[index]）；
索引++；
}
返回$（结果）；
}
函数prevUntil（选择器，$this，$timeslot）{
var index=$timeslots.index（$this）-1；
var结果=[]；
while（index>=0&&！$（$timeslot[index]）.hasClass（'timeslot-disabled'））{
结果推送（$timeslots[index]）；
索引--；
}
返回$（结果）；
}
});
$（“.timeslot”）.mouseleave（函数（）{
$（“.timeslot”）.removeClass（'timeslot-active'）；
});
您的意思是要突出显示未禁用的第一个
n
时隙吗？不，我的意思是要突出显示鼠标指针正下方当前div中的n个时隙。比如3个额外的时隙=>current（13:00）+extra 3（13:30、14:00、14:30）。禁用的时隙只有在突出显示的区域中才起作用；他们正在将整个突出显示的区域推回。这就是为什么Previtil在那里。但这不是问题，我知道怎么做。我不明白如何将来自不同父母的所有时隙组合成一个集合。例如，如果我将鼠标悬停在早上最后一个时隙上方，我应该突出显示一天中的第一个时隙。
$timeslots = $('.timeslot);

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