How to add a class to the element with the closest value

Question

I am making an events calender with dates and would like to add a class to the next upcoming date (the closest to the current date)

html

<div>
   <div class=".date" id="9,18,2013">18th Sept 2013: Going Fishing</div>
   <div class=".date" id="22,01,2014">22nd Jan 2014: Going on Holiday to Greece</div>
   <div class=".date" id="16,02,2014">16th Feb 2014: Business Meeting</div>
   <div class=".date" id="27,02,2014">27th Feb 2014: Sisters Birthday</div>
</div>

javascript/jquery

var today = new Date();
  var a = $(".date").attr('id')
  var b = a.split(",");
  var c = new Date(b[2], b[0], b[1]);

this changes the id value as a date but i need to find the closest one to the variable "today"

Your html code looks really wierd. Why don't you use data-attribute ? http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html — Felipe Miosso, Jan 10 '14 at 11:14
but isn't the data-attribute a HTML5 element? which doesnt give me very good browser cross campatibilty, as the page i am creating needs to cover ie 7/8 — navigator, Jan 10 '14 at 11:18
HMTL4 spec says the first character of an `id` or `class` attribute should be `[A-Za-z]` so your not fully compatible with HTML4 either (See [What are valid values for the id attribute in HTML?](http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html/70586#70586)) — AeroX, Jan 10 '14 at 11:19
No, data-attribute is not a HTML5 element. It's not even an element, it's an attribute. And you don't need a HTML5 complaint browser to make it work. — MMM, Jan 10 '14 at 11:21
And that doesn't solve your issue, @Aerox was pointing out a mistake in your code. — MMM, Jan 10 '14 at 11:21
@navigator I don't think your IDs attribute are valid... Why using commas? — A. Wolff, Jan 10 '14 at 11:23
Also the first date in the `id` is incorrect `9,18,2013` should be `18,9,2013` if it's to follow the pattern of the other dates. I would suggest changing your date `id`s to this `d2013-09-18` format instead though as it's then valid HTML and easier to work with. Here is a modified version of @ArunPJohny's [Fiddle](http://jsfiddle.net/S73KL/3/) with the changes I suggest. — AeroX, Jan 10 '14 at 11:38

Arun P Johny · Accepted Answer · 2014-01-10T11:41:37.613

If the elements are sorted as given in the example then

<div>
    <div class="date" id="18,9,2013">18th Sept 2013: Going Fishing</div>
    <div class="date" id="22,01,2014">22nd Jan 2014: Going on Holiday to Greece</div>
    <div class="date" id="16,02,2014">16th Feb 2014: Business Meeting</div>
    <div class="date" id="27,02,2014">27th Feb 2014: Sisters Birthday</div>
</div>

and

var today = new Date();
//clear the time part
today.setHours(0, 0, 0, 0);
//need to remove the . from the class attribute of the elements
$('.date').each(function () {
    var parts = this.id.split(",");
    var date = new Date(parts[2], parts[1], parts[0]);
    if (date - today > 0) {
        $(this).addClass('next');
        //return false to prevent the iteration of any other element
        return false;
    }
})

Demo: Fiddle

Here is a [Modified Fiddle](http://jsfiddle.net/S73KL/3/), with the change I suggest in the comments (using valid HTML `id`s & correcting the invalid date in the example). — AeroX, Jan 10 '14 at 11:41

How to add a class to the element with the closest value

1 Answers1