在IE7中包含if和.each（）的jQuery函数非常慢 [英] jQuery function containing if's and .each() very slow in IE7

问题描述

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

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

我用.each（）循环的上下文是一个天数列表，实际上只是一个月内全部30天或多少天，最多6个月。每天包含格式为mmdd的日期以及月份作为数据属性。

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>

更新：不幸的是，所有提示和提示都可以提高选择器和每个元素都失败了。但我仍然希望能够让它发挥作用。我真的没有一个正确的想法，但我不知何故感觉可能有一种方法，比如find（）和一个能够在较高和较低数字之间区别的选择器（正如你在标记中看到的那样） ）我的数据属性只是数字。
在选择器中有比较的方法吗？这样我就可以省略.each（），并希望能够超越性能问题。

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.

推荐答案

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

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

这篇关于在IE7中包含if和.each（）的jQuery函数非常慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！