0

私が書いている Web アプリケーションには、グリッドを作成する一連の div があります。グリッドは、ユーザー入力に基づいて、X div x Y div です。jQueryホバー機能を使用して、一定距離内にあるすべての周囲のdivの背景色を変更したいと思います。基本的に、div にカーソルを合わせると、4 行 4 列以内のすべての div も背景色を変更する必要があります。私はこれをうまく機能させることができますが、グリッドが 32 x 128 div になると、実際のパフォーマンスの問題が発生し、ホバー効果がマウスよりも著しく遅れます。グリッドが30 x 30のようなものである場合、問題は存在しないため、DOM内に同様のdivが大量にあるためであるとほぼ確信しています.

これは私の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 にカーソルを合わせると、必要な divdivのみをチェックarr[4]します。arr[12]

かなりの量の検索を排除しているので、これによりプロセスがかなり高速化されると思いますが、ホバーにはまだ非常に顕著な遅延があります.

これを設定する方法に明らかに間違っていることはありますか? 問題があれば、最新バージョンの Chrome を使用しています。

4

2 に答える 2

1

クラス名による選択はブラウザーにネイティブですが、要素内のデータによる選択は jQuery 内のループに依存します。

クラス名を使用して行と列にラベルを付けると、セレクターがはるかに高速になります。

于 2013-01-18T18:25:47.617 に答える
0

各キャップにクラスを追加すると、大規模なセレクターを動的に構築できます。

  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 に答える