2個jQuery的Timepickers - 如何區分（jquery.timepicker）

Question

我使用jQuery.timepicker（不知道這個插件是如何廣泛使用 - 它是由喬恩·桑頓，Git的創建：https://github.com/jonthornton/jquery-timepicker和示例頁面：http://jonthornton.github.io/jquery-timepicker/）

我有2個時間選擇器，我已經創建，StartTime和EndTime，從5點到20點59分間隔選擇填充下拉菜單。

例如，

$('#startTime').timepicker({ 
     'minTime': '12:00am', 
     'maxTime': '11:59pm', 
     'step': '5', 
     'showDuration': 'false' 
});  

$('#endTime').timepicker({ 
     'minTime': '12:00am', 
     'maxTime': '11:59pm', 
     'step': '5', 
     'showDuration': 'false' 
}); 

但在最終的HTML此插入在輸入欄上點擊時，彈出相同支撐的DIV。據我所知，他們沒有通過職位，身份證或班級來區分。

<div class="ui-timepicker-wrapper" tabindex="-1" style="position: absolute; top: 230.233px; left: 345.667px; display: none;"> 
    <ul class="ui-timepicker-list"> 
     <li>12:00am</li> 
     <li>12:05am</li> 
     ... 
</ul></div> 

兩者。有什麼辦法可以區分它們嗎？我需要從＃2中刪除一些在＃1中選擇的條目。以下內容不起作用，因爲它從錯誤列表中刪除。在這個例子中，我需要從＃2的列表中刪除在＃1中選擇的時間。

$('#endTime').on('showTimepicker', function() { 
    var current = $('.ui-timepicker-list li').filter(function() { // Exact match necessary 
     return $(this)[0].childNodes[0].textContent == $('#startTime').val(); 
    }); 
    if (current.length) { 
     $(current).remove(); 
    } 
}); 

Answer 1

在創建timepicker，您可以使用className:選項來指定一個類，得到含下拉菜單中的HTML元素。所以給兩個timepickers不同類別：

$('#startTime').timepicker({ 
     className: 'startTime', 
     'minTime': '12:00am', 
     'maxTime': '11:59pm', 
     'step': '5', 
     'showDuration': 'false' 
});  

$('#endTime').timepicker({ 
     className: 'endTime', 
     'minTime': '12:00am', 
     'maxTime': '11:59pm', 
     'step': '5', 
     'showDuration': 'false' 
}); 

$('#endTime').on('showTimepicker', function() { 
    var current = $('.endTime li').filter(function() { // Exact match necessary 
     return $(this).text() == $('#startTime').val(); 
    }); 
    current.remove(); 
}); 

你也不需要一個冗長的代碼以獲取列表項的文字，只需使用$(this).text()。並且不需要檢查current的長度;如果它是空的，remove()不會做任何事情（幾乎所有的jQuery方法在處理空集合時都沒有問題）。