nextUntil 和 prevUntil 在一组组合元素上

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 按钮列表，其中一些已禁用 class。当鼠标悬停在 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) 元素的父元素中有效。由于样式和定位问题，我需要使用不同的容器，但我想将所有容器中的时间段 divs 作为一组突出显示。

我可以像

那样做吗

$timeslots = $('.timeslot);

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

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

P. P. S.如果我设法解决了这个问题，我还有一个问题：如何确定鼠标点击时突出显示的第一个时隙？可能我可以解析 ids 以获得最小值，但我怀疑这是正确的做法。

Answer 1

Can I do that like $timeslots = $('.timeslot); and after that traverse in that set from $(this) with my nextUntil and 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');
});

nextUntil 和 prevUntil 在一组组合元素上

nextUntil & prevUntil on a combined set of elements

javascript

jquery

traversal