0

在我正在编写的 Web 应用程序中，我有一系列创建网格的 div。网格是 X div x Y div，基于用户输入。使用jQuery悬停功能，我想改变一定距离内所有周围div的背景颜色。基本上，如果我将鼠标悬停在一个 div 上，则 4 行 4 列内的所有 div 也应该改变它们的背景颜色。我可以正常运行，但是当网格变为 32 x 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]. 因此，当div第 8 行中的 a 悬停时，我只检查必要arr[4]的arr[12]div。

我认为这会大大加快这个过程，因为我消除了大量的搜索，但悬停仍然有一个非常明显的滞后。

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

4

2 回答 2

1

按类名选择是浏览器原生的，而按元素内的数据选择取决于 jQuery 内的循环。

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

于 2013-01-18T18:25:47.617 回答
0

如果你为每个 caps 添加一个类，你就可以动态构建一个巨大的选择器：

  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);  
    }
  }
于 2013-01-18T20:07:26.703 回答