Javascript / jQuery - 搜索一个编号的类，如果未找到类，则跳转到最近的数字

Question

我有一个列表，代表一天中的几个小时。这样：

<ol>
    <li class="9">Item</li>
    <li class="10">Item</li>
    <li class="11">Item</li>
    <li class="13">Item</li>
    <!-- and so on .... -->
</ol>

我有一个"现在"按钮，它获取当前小时，然后动画化以在列表中找到该小时，如下所示：

$('#jump-to-now').click(function () {
        // new date object
    var date = new Date(),
        // give us the hour
        theHour = date.getHours();
    scrollToHour(theHour);
});
function scrollToHour(hourAsNumber) {
    // use the hour number and match it against a day with a class of that number
    var theListingItem = listingDays.filter('.active-day').find('li').filter('.' + hourAsNumber),
        // get the offset relative to the document
        offsetTop = theListingItem.offset().top;
    $('html, body').animate({
        scrollTop: offsetTop
    }, slideAnimationTime);
}

这里唯一的问题是，如果没有该小时类的列表项，则不会发生任何事情。我想做的是，转到当前小时之后最近的小时。

例如，现在是早上 7 点，

用户单击该按钮，代码发现早上 7 点之后最近的列表项匹配项是上午 9 点，它会跳转到该列表项。

我该怎么做？

Answer 1

大致的逻辑（您可能需要调整）：

function scrollToHour(hourAsNumber) {
    var lis = listingDays.filter('.active-day').find('li');
    // use the hour number and match it against a day with a class of that number
    var theListingItem = lis.filter('.' + hourAsNumber);
    // if no item for the specified hour, find nearest
    if(theListingItem.length == 0) {
        var delta = 1;
        while(theListingItem.length == 0 && delta <= lis.length) {
            // check next
            theListingItem = lis.filter('.' + (hourAsNumber + delta) );
            // check previous (uncomment if needed)
            /*
            if(theListingItem.length == 0) {
                theListingItem = lis.filter('.' + (hourAsNumber - delta) );
            }
            */
            delta++;
        }
    }
    // get the offset relative to the document
    var offsetTop = theListingItem.offset().top;
    $('html, body').animate({
        scrollTop: offsetTop
    }, slideAnimationTime);
}

Answer 2

类

名不应以数字开头。 更改您的类，例如

<ol>
    <li class="h9">Item</li>
    <li class="h10">Item</li>
    <li class="h11">Item</li>
    <li class="h13">Item</li>
    <!-- and so on .... -->
</ol>

然后你可以试试这个

function scrollToHour(hourAsNumber) {   
    var hours = listingDays.filter('.active-day').find('li');
    var theListingItem = hours.filter('.h' + hourAsNumber);
    while(!theListingItem.get(0))
    {
      if(hourAsNumber<=24)
         theListingItem = hours.filter('.h' + (++hourAsNumber));
     }
     // get the offset relative to the document
     var offsetTop = theListingItem.offset().top;
     $('html, body').animate({
         scrollTop: offsetTop
     }, slideAnimationTime);
}

Answer 3

假设类不应该以数字开头，这是一个具有有效类名的示例 jsbin： http://jsbin.com/ibeteb/3/edit

<ol>
    <li class="h9">Item</li>
    <li class="h10">Item</li>
    <li class="h14">Item</li>
    <li class="h19">Item</li>
    <!-- and so on .... -->
</ol>

---

var hourAsNumber = 12;
var theListingItem = $('ol li').filter(function(i, el) {
  var h = +($(el).attr('class').substring(1));
  if (h >= hourAsNumber) return $(el);
})[0];

console.log(theListingItem); // jump to this element (li.h14 in the example)

---

请注意，当没有可用项目时（例如，在示例中hourAsNumber = 20时），将undefined theListingItem。

因此，在检查offset()并开始滚动之前，请确保该元素存在，例如

if (theListingItem.length) {
   /* an available hour was found - here you scroll */
}
else {
   /* say the user "you arrived too late. try again tomorrow" :)
    * or do nothing 
    */
}