Javascript / jQuery-搜索编号的类，如果找不到类，则跳至最接近的数字

Question

I have a list, which represents some hours of a day. Like so:

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

And I have a "Now" button which gets the current hour and then animates to find that hour in the list, like this:

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

The only problem here is that if there is no list item with a class of that hour, nothing happens. What I'd like to do, is go to the nearest hour after the current hour.

For example, it's 7am and the user clicks the button, the code finds that the nearest listing item match after 7am is 9am and it jumps to that list item.

How can I do this?

Answer 1

The logic, roughly (you may need to tweak):

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

Premising that a class should not start with a number, this is an example jsbin with valid classname : 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)

---

Note that theListingItem will be undefined when there's no item available (eg when in the example hourAsNumber = 20 ).

So before checking the offset() and starting the scroll, be sure that the element exists, eg

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 
    */
}

Answer 3

you should not start a class name with a number. change your class like

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

Then you can try this

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