1

我正在编写一个 jQuery 可用性日历，它基本上显示一个巨大的表格。有多大？过去两年、今年和未来两年的每一天都有 34 行和 1 列。我会为您计算：超过 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 根据自定义属性的值更快地执行这些任务。

有任何想法吗？

4

2 回答 2

1

tldr; 不要试图逐列选择每个元素，尤其是选择器必须费力地搜索许多元素和相应的属性。

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

首先，使用 jQuery选择第一row = $("#calendar .calendar_slot:first")[0]行 - 即或任何合适的。然后，使用nextSibling. 当到达选择的最后一行索引时停止迭代。在行支配列的假设下，这个循环操作必须相对较快，这就是为什么我推荐简单的 DOM 操作和“范围扫描”的原因。（或者，这可能在 jQuery 选择器语法中使用下一个兄弟选择器和/或范围选择器和/或jQuery.slice.）

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

$(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!
  }
}

请注意，选择器每行只执行一次；此外它只需要查看子元素。与迭代上面的行不同，“较慢”的 jQuery 在这里就足够了，因此应该是首选。

另外，考虑jQuery Range Selectors；我会尝试这两种方法，看看哪些方法可以满足您的目标。范围选择器可能会完全减轻我选择上面行的建议，并且它们可能会很好地添加到列选择器并消除显式条件。

于 2013-02-14T18:10:14.207 回答
1

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

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

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

 $("#container_div  .calendar_slot[row="+r+"][column="+c+"]")
于 2013-02-14T17:42:09.567 回答