Question

在我正在编写的Web应用程序中，我有一系列创建网格的div。根据用户输入，网格是X div除以Y div。使用jQuery悬停功能，我想在一定距离内更改所有周围div的背景颜色。基本上，如果我将鼠标悬停在div上，则4行和4列之外的所有div也应该更改其背景颜色。我可以很好地运行这个功能，但是当网格变为32×128 div时，会出现真正的性能问题，并且悬停效果明显落后于鼠标。我几乎可以肯定，这是因为DOM中存在大量类似的div，因为当网格类似于30 x 30时，问题不存在。

这是我的html的基本结构：

<div class="table_area">
    <div class="table_row" id="row-0">
        <div class="cap" data-row="0" data-column="0"></div>
        <div class="cap" data-row="0" data-column="1"></div>
        ...
    </div>
    <div class="table_row" id="row-1">
        <div class="cap" data-row="1" data-column="0"></div>
        <div class="cap" data-row="1" data-column="1"></div>
        ...
    </div>
    ...
</div>

为了加速搜索DOM，我已将每一行添加到数组中。因此，$('div.table_row[data-row="0"]')将在arr[0]中。因此，当第8行中的div悬停时，我只会检查arr[4]到arr[12]是否有必要的div。

我认为这会加快这个过程，因为我正在消除大量的搜索，但是在悬停中仍有明显的滞后。

我如何设置它有什么明显的错误吗？我正在使用最新版本的Chrome，如果这很重要的话。

Answer 1

通过类名选择是浏览器的本机，而按元素中的数据选择取决于jQuery中的循环。

使用类名来标记行和列，选择器会更快。

Answer 2

如果您为每个大写字母添加一个类，则可以动态构建一个大型选择器：

  var sel = "";
$(".cap").hover(function () {
    var row  = $(this).data("row");
    var col = $(this).data("column");
    sel = "";
    for(var i=row-2; i<=row+2; i++)
    {
      for(var j=col-2; j<=col+2; j++)
      {
        sel += ".r" + i + ".c" + j + ",";
      }
    }
  sel = sel.slice(0,-1);
  $(sel).css("background-color","blue");
},function () {
    $(sel).css("background-color","white");
  });
});

示例：http://jsbin.com/izeyal/38/edit

由于我是动态创建行和列，因此我还为每个行添加了id，如果需要，可以通过更改选择器生成代码来测试它们：

  sel += "#r" + i + "c" + j + ",";

为了完整性，我用来生成网格的代码：

  for(i=0; i<128; i++)
  {
    var newRow = $('<div/>', {
    id: 'row-' + i
}).appendTo('.table_area');
    for (j=0; j<32; j++)
    {
      var rowid= "r" +i + "c" + j;
      $('<div/>', {id: rowid }).data("row",i).data("column",j).addClass("cap r" + i + " c" + j).appendTo(newRow);  
    }
  }

如何在使用jQuery悬停时提高效率/速度？

2 个答案: