nextUntil＆prevUntil上組合的一組元素

的我已動態創建HTML這樣的（簡化的）nextUntil＆prevUntil上組合的一組元素

<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穿越從$（本）後？也許還有另一個更正確的解決方案？

P.S.元素的精確數量和被禁用的是一個動態分配的東西，通過Ajax從服務器傳輸，我不能依賴它。

P. P. S.如果我設法解決這個問題，我還有一個問題：如何確定點擊鼠標時突出顯示的第一個時隙？有可能我可以解析id的最小值，但我懷疑這是正確的做法。

來源

2017-10-17 Leeder

你的意思是要強調，沒有被禁用第一個'N'時隙？ – aaron

不，我的意思是我想突出顯示從鼠標指針正下方的當前div開始的n個時隙。像另外3個時隙=>當前（13:00）+額外3（13:30，14:00，14:30）。 – Leeder

DIsabled插槽只有在高亮顯示的區域纔有意義;他們將整個突出顯示的區域推回去。這就是爲什麼prevUntil在那裏。但這不是問題，我得到了如何做到這一點。我不明白如何將來自不同父母的所有時間片組合成一組。例如，如果我懸停在早晨的最後一個時間段上，我應該首先突出顯示第一天的時間段。 – Leeder

我可以像$timeslots = $('.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'); 
});

來源

2017-10-17 16:02:58 aaron

nextUntil＆prevUntil上組合的一組元素

回答

相關問題