jQuery代码优化答案

【问题标题】：jQuery code optimizationjQuery代码优化
【发布时间】：2009-09-15 22:47:09
【问题描述】：

我的 jQuery 代码看起来像这样

在Button1上点击

$('table.result_grid tbody tr')
    .filter(function() {
        var chkbox = $(this).find(':checkbox')[0];
        return !chkbox.checked;
    })
    .show();

在 Button2 上单击

 $('table.result_grid tbody tr')
     .filter(function() {
         var chkbox = $(this).find(':checkbox')[0];
         return !chkbox.checked;
     })
     .hide();

在两次点击时，它都会搜索相同的 tr。
有没有办法优化上面的代码？
有没有办法可以将上述 tr 存储在变量 blah 中，然后说 blah.hide() 或 blah.show()。

【问题讨论】：

看起来是 toggle() 的好例子

标签： javascript jquery optimization

【解决方案1】：

是的。使用

var blah = $('table.result_grid tbody tr') .filter(function() { var chkbox = $(this).find(':checkbox')[0]; return !chkbox.checked; });
Button1.onClick=function(){blah.hide()};
Button2.onClick=function(){blah.show()};

【讨论】：

如果我在单个函数中编写隐藏和显示，则此方法有效。我的 button1 和 button2 调用不同的函数。你能推荐一下吗？
@Balaji: Button1.onClick=function(){blah.hide()}; 可以用更 jQuery 风格的东西代替。此外，您可以将处理程序放在blah.hide() 之前或之后。或者，您可以将 blah 传递给您的处理程序。

【解决方案2】：

类似这样的：

$('.button1, .button2').click(function() {
  $('table.result_grid tbody tr').
    filter(function() {
      var chkbox = $(this).find(':checkbox')[0];
      return !chkbox.checked;
    }).
    [$(this).is('.button1') ? 'hide' : 'show']();
});

【讨论】：

【解决方案3】：

您应该能够使用:not 伪类和属性选择器选择未选中的复选框。

$('table.result_grid tbody tr input:not([checked])').show();

【讨论】：

【解决方案4】：

首先，让选择器完成工作。您可能不会比 jQuery 的效率做得更好。这将获得所有包含复选框的行：

$('table.result_grid tbody tr:has(input:checkbox)')

接下来，选择更高效的选择器。这对您的 CSS 也是一个好主意。这里我添加“>”来表示右边是左边的直系后代：

$('table.result_grid > tbody > tr:has(td > input:checkbox)')

最后，保存返回行的集合：

var cached_rows = $('table.result_grid > tbody > tr:has(td > input:checkbox)')

确保cached_rows 变量保存在每个处理程序都可以访问的范围内。如果您不想或不能将这些变量放在该范围内，请小心传递引用。

【讨论】：