Question

我基本上搜索具有特定数据属性的元素，因此我使用可能具有这些数据属性的类遍历所有元素。我使用jQuery each（）函数进行循环，并且已经阅读并体验到，与其他常见浏览器（如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');
            }
        })
});

Answer 2

您可以先尝试在函数顶部获取对$(this)的引用，然后重复使用它。一遍又一遍地调用$(this)会对性能产生轻微影响。
您是否可以将初始选择范围限制为比body更窄的范围？

您知道.course类是否始终应用于某个DOM元素（例如<p>标记）？如果您，当您在前面添加标签名称时，IE7的选择器搜索似乎更快 - 例如p.course而非.course。链接到效果结果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');
        }
    })

}）;

我希望这有帮助！

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

2 个答案: