包含 if 和 .each() 的 jQuery 函数在 IE7 中非常慢

Question

我基本上搜索具有特定数据属性的元素，因此我循环遍历具有可能具有这些数据属性的类的所有元素。我使用 jQueryeach() 函数进行循环，并且已经阅读并体验到，与其他常见浏览器(如 Firefox、Chrome 或 Safari)相比，它在 IE7 或任何其他 IE 中通常相当慢。

也许有更好的方法来查找这些元素？!

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

我使用 .each() 循环的上下文是一个天数列表，实际上只是所有 30 天或一个月中的天数，最多 6 个月。每天都包含格式为“mmdd”的日期以及作为数据属性的月份。

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

更新:不幸的是，所有提高选择器和元素性能的技巧和提示都失败了。但我仍然希望能够让它发挥作用。我真的没有一个正确的想法，但我不知怎的感觉可能有一种方法像 find() 和一个选择器能够区分更高和更低的数字(正如你在标记中看到的那样) )我的数据属性只是数字。 有没有办法在选择器中进行比较？这样我就可以省略 .each() 并希望能够解决性能问题。

Answer 1

您可以通过减少对 data 方法的调用次数以及创建 this 元素的 jQuery 对象实例来优化代码，以帮助提高性能。

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