nextUntil & prevUntil auf einem kombinierten Satz von Elementen

Question

Ich habe eine dynamisch wie diese erstellt HTML (vereinfacht)

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

Es ist eine Form, die mehrere Listen von div-Tasten, einige von ihnen mit Behinderungen Klasse . Ich möchte einige der Schaltflächen markieren, wenn die Maus über einem Div schwebt. Die Anzahl der zu markierenden divs wird vom Server übertragen. Ich kann das wie folgt aus:

$(".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'); 
}); 

Wo # {additional_slots} ist die Anzahl der zusätzlichen divs hervorgehoben werden.

Es funktioniert, aber nur innerhalb der Eltern von $ (this) -Element. Ich brauche aufgrund von Styling- und Positionierungsproblemen verschiedene Container, aber ich möchte Zeitfenster-Divs aus allen Containern als einen Satz hervorheben.

Kann ich das wie

$timeslots = $('.timeslot); 

und nach dieser Traverse in diesem Satz von $ (this) mit meinem nextUntil und prevUntil? Vielleicht gibt es eine andere, korrektere Lösung?

P.S. Die genaue Anzahl der Elemente, die deaktiviert sind, ist ein dynamisch zugewiesenes Zeug, das vom Server über Ajax übertragen wird. Darauf kann ich mich nicht verlassen.

P. P. S. Wenn es mir gelingt, das zu lösen, habe ich noch eine Frage: Wie kann man das erste der markierten Zeitfenster beim Mausklick ermitteln? Möglicherweise kann ich IDs für den minimalen Wert analysieren, aber ich bezweifle, dass es das Richtige ist.

Answer 1

Kann ich das tun wie $timeslots = $('.timeslot); und danach in diesem Satz von $ (this) mit meinem nextUntil und prevUntil?

Sicher, können Sie die nextUntil und prevUntil für diese Situation implementieren:

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