jQuery function containing if's and .each() ve

Question

I basically search for an element with specific data-attributes, so I loop through all of the elements with the class that might have those data-attributes. I loop with the jQuery each() function and already read and experienced that it is quite often pretty slow in IE7 or any other IE compared to the other common browsers like Firefox, Chrome or Safari.

Maybe there's a better way to find these elements ?!

$('body').on('mouseenter', '.course', function(){
        var startday = $(this).data('start');
        var endday = $(this).data('end');
        var coursemonth = $(this).data('month');

        $('.dayname').each(function() {
            var thisday = $(this).data('date');
            var thismonth = $(this).data('month');

            if(thisday >= startday && thisday <= endday && thismonth == coursemonth)
            {
                $(this).addClass('red');
            }
        })
});

The context I'm looping through with the .each() is a list of days, actually just all the 30 or how many days in a month and this for up to 6 month. Each day contains the date in the format 'mmdd' and also the month as a data attribute.

            <div class="dayname we" data-date="0401" data-month="04">So</div>
            <div class="dayname " data-date="0402" data-month="04">Mo</div>
            <div class="dayname " data-date="0403" data-month="04">Di</div>
            <div class="dayname " data-date="0404" data-month="04">Mi</div>
            <div class="dayname " data-date="0405" data-month="04">Do</div>

Update: Unfortunately all tips and hints to increase the performance of selectors and elements in the each failed. But I still hope to be able to get this to work. I don't really have a proper idea, but I somehow have the feeling that there might be a way with something like find() and a selector that is able to differ between higher and lower numbers as (as you can see in the markup) my data attributes are just numbers. Is there a way out there with comparison in the selector ? That way I could omit the .each() and hopefully outrun the performance problem with that.

Answer 1

1. You can first try to grab a reference to $(this) at the top of your function and reuse it. Calling $(this) over and over does have a slight performance impact.
2. Are you able to limit your initial selector scope to something more narrow than just body?

3. Do you know if .course classes will always be applied to a certain DOM element (e.g. <p> tags)? If you, it seems that IE7's selector searches are faster when you include the tag name in front -- e.g. p.course instead of just .course. Link to performance results here.

   $('body').on('mouseenter', '.course', function(){
       var thisObj = $(this),
           startday = thisObj.data('start'),
           endday = thisObj.data('end'),
           coursemonth = thisObj.data('month');
   
       $('.dayname').each(function() {
           var thisOtherObj = $(this),
               thisday = thisOtherObj.data('date'),
               thismonth = thisOtherObj.data('month');
   
           if(thisday >= startday && thisday <= endday && thismonth == coursemonth)
           {
               thisOtherObj.addClass('red');
           }
       })
   

   });

I hope this helps!

Answer 2

You can optimize your code to help improve the performance by reducing the number of calls to data method and also creating jQuery object instance of this element.

var $dayName = $('.dayname');
$('body').on('mouseenter', '.course', function(){
        var dataObj = $(this).data();

        $dayName.each(function() {
            var $this = $(this);
            var innerDataObj = $this.data();

            if(innerDataObj.date >= dataObj.start 
               && innerDataObj.date <= dataObj.end 
               && innerDataObj.month == dataObj.month)
            {
                $this.addClass('red');
            }
        })
});