Как изменить класс на основе даты, используя jQuery

Question

Я создаю календарь событий и мне нужен фрагмент jQuery / Javascript, который изменит класс на div на основе даты.

Мне нужно, чтобы все предыдущие дни имели один класс, сегодняшний класс - один класс, а будущие даты - один класс.

Это мой исходный код:

<div id="container">
        <div class="box nov28">...</div>
        <div class="box dec1">...</div>
        <div class="box dec3">...</div>
        <div class="box dec5">...</div>
        <div class="box dec7">...</div>
        <div class="box dec12">...</div>
        <div class="box dec15">...</div>
        <div class="box dec17">...</div>
        <div class="box dec19">...</div>
        <div class="box dec21">...</div>
        <div class="box dec22">...</div>
        <div class="box dec23">...</div>
    </div>

Это не просто начать 1 декабря и продолжаться 24 дня. Есть 12 дней «предложений», которые точно не последуют. Это видно по классам div, то есть nov28 dec1 dec3

В дни занятий мне нужно добавить подарок к классу, в предыдущие дни - в класс в предыдущие и в будущие даты - класс в будущем.

Вся помощь приветствуется.

- РЕДАКТИРОВАТЬ -

Исходное сообщение изменено, чтобы быть более конкретным.

Answer 1

// get today's date
var today = new Date();
today = new Date(today.getFullYear(), today.getMonth(), today.getDate());

// go through the calendar windows representing each day
$('div.calendar-window').each(function() {
    var div = $(this);
    // check the date of the window.
    // let's imagine that the date is in a span with class date
    var divDate = Date.parse($('span.date', this).text());
    switch(divDate)
    {
        case divDate > today:
            div.addClass('future');
            break;               
        case divDate < today:
            div.addClass('past');
            break;
        default:
            div.addClass('today');   
            break;        
    }      
});

Это всего лишь пример, но, надеюсь, вы поняли идею. Учитывая, что календарь событий запускается только на декабрь, использование полной даты может быть излишним, и просто использовать getDate(), а целочисленное сравнение может быть лучшим подходом. Кроме того, мы могли бы просто выбрать элементы <span> для их итерации, применяя класс к родительскому элементу <div> в каждом случае. Это должно быть пищей для размышлений:

Answer 2

На основе HTML-кода выше

var today = new Date();
today = new Date(today.getFullYear(), today.getMonth(), today.getDate());

var month = "dec";
var day = today.getDate();
if (today.getMonth() == 10) {
    month="nov";
}

var selected = $(".container > div."+month+day);
if (selected.size() > 0) {
    selected.prevAll("div").addClass("previous");
    selected.addClass("present");
    selected.nextAll("div").addClass("future");
} else {
    // based on idea from Russ Cam but
    // only loop over all div's if today there is no matching div
    // as this is more costly (loop, regex, ...)
    $('.container > div').each(function() {
        var div = $(this);
        //extract month and date from class value 
        var divMonth = div.attr("class").replace(/.*(nov|dec)\d+.*/, "$1") == 'nov' ? 10 : 11;
        var divDay = div.attr("class").replace(/.*(?:nov|dec)(\d+).*/, "$1");
        var divDate = new Date(today.getFullYear(), divMonth, divDay);
        if (divDate > today)
            div.addClass('future');
        else
            if (divDate < today)
                div.addClass('previous');
            else
                div.addClass('present');
    });
}

Проверьте http://jsbin.com/ewuro/edit для демонстрационного кода (немного адаптирован, чтобы показать его). Перейдите на вкладку «Вывод», чтобы опробовать ее.

Btw. http://jsbin.com/ewuro,, хотя он должен отображать то же, что и http://jsbin.com/ewuro/edit -> вкладка «Вывод», не работает. Поскольку основа jsbin, кажется, поглощает $1 в моем регулярном выражении, таким образом, три кнопки для (27 ноября, 4 декабря и 8 декабря не будут работать) Так что попробуйте в выходной таблице.