Question

我正在编写一个jQuery Availability Calendar，它基本上显示了一个庞大的表。多大？在过去两年，当前年份和未来两年中，每天有三十四行和一列。我会为你做数学计算：超过62,000个表格单元格。

是的，这会慢慢加载，但一旦加载，日历就会完全符合我们的需求。只有一个问题：

用户需要能够选择一个单元格块。我在UI中设置了所有内容，允许用户在一组单元格周围绘制一个框，选择框内的所有单元格。这是实际标记它们“选中”的过程，这种过程非常缓慢。这是我使用的循环代码：

while(r<=thisRow) {
            for(var c=startColumn;c<=thisColumn;c++) {
                if($(".calendar_slot[row="+r+"][column="+c+"]").attr('selectable')=='YES') {
                    if (toggleDirection==0) { $(".calendar_slot[row="+r+"][column="+c+"]").removeClass('selected'); $(".calendar_slot[row="+r+"][column="+c+"]").html(''); }
                    if (toggleDirection==1) { $(".calendar_slot[row="+r+"][column="+c+"]").addClass('selected'); $(".calendar_slot[row="+r+"][column="+c+"]").html($(".calendar_slot[row="+r+"][column="+c+"]").attr('label')); }
                }

            }
            r++;
}

如您所见，我必须选择列和行自定义属性的值。我无法将这些嵌入到单元格的ID中，因为还有另一个进程对已经使用ID值的速度具有相同的需求。如果ID值包含行和列信息，则此其他函数将中断，然后它将需要使用自定义属性，因此遇到了我在这里遇到的同样问题。

有没有办法加快这个选择过程？循环本身不需要很长时间（如果我注释掉jQuery的东西，它运行得非常快）。因此，我需要一种方法来强制jQuery根据自定义属性的值更快地执行这些任务。

有什么想法吗？

Answer 1

使用临时变量来避免重复搜索，例如：

var $RC = $(".calendar_slot[row="+r+"][column="+c+"]")

此外，如果您可以通过使用容器元素限制搜索范围来缩小搜索范围，则会更快：

 $("#container_div  .calendar_slot[row="+r+"][column="+c+"]")

Answer 2

tldr; 不尝试逐行选择每个元素，特别是选择器必须仔细搜索许多元素和相应的属性。

这是我最初尝试解决它的方式：

首先，使用jQuery选择 first 行 - 即row = $("#calendar .calendar_slot:first")[0]或任何合适的行。然后，使用nextSibling遍历DOM节点。在达到所选的最后一行索引时停止迭代。在假设行控制列的情况下，这个循环操作必须相对快，这就是我推荐简单DOM操作和“范围扫描”的原因。（或者，使用next sibling selector和/或range selectors和/或jQuery.slice在jQuery选择器语法中这可能是可行的。）

对于上面迭代的每一行，使用类似于：

的内容

$(row).children(".calendar_slot[selectable]").each(function () {
  var colNum = +this.column
  if (colNum > x && colNum < y) {
    var col = $(this)
    // do stuff with col here: only wrapped once!
  }
}

请注意，选择器每行只执行一次;此外，它只需要查看child elements。与迭代上面的行不同，“慢”jQuery在这里就足够了，所以应该首选。

另外，考虑jQuery Range Selectors;我会用两种方法来看看哪一个符合你的目标。可能的情况是范围选择器可以完全缓解我上面选择行的建议，它们可能会对列选择器做出很好的补充并消除显式条件。

根据属性加快修改表格单元格的范围（行/列选择）

2 个答案: