给定特定条件隐藏行（慢）

Question

如果其中的输入符合特定条件，我会尝试将 tr 隐藏在 html 表中。 条件由下拉列表的选定值定义。 我是这样做的：

$(function () {

  $('body').find('#p_Selection').live('change', function () {

    var type = $('body').find('#p_Selection').attr('value');
    var tableRow = $('.goods').find('.detail-child tr');

    tableRow.each(function (index) {

      var Record_LidExpected = $('input[id$=Record[' + index + ']_LidExpected]').attr('value');
      var Record_LidObtained = $('input[id$=Record[' + index + ']_LidObtained]').attr('value');
      var Record_QuantityExpected = $('input[id$=Record[' + index + ']_QuantityExpected]').attr('value');
      var Record_QuantityObtained = $('input[id$=Record[' + index + ']_QuantityObtained]').attr('value');

      if (type == "1") {

        if (Record_LidExpected != Record_LidObtained) {
          $(this).hide();
        }
        else {
          if (Record_QuantityExpected != Record_QuantityObtained) {
            $(this).hide();
          }
        }
      }
      else {
        if (type == "2") {
          if (Record_LidExpected == Record_LidObtained) {
            $(this).hide();
          }
          else {
            if (Record_QuantityExpected == Record_QuantityObtained) {
              $(this).hide();
            }
          }
        }
        else {
          if (type == "0") {
            $(this).show();
          }
        }
      }
    });
  });
});​

这个脚本在我的 aspx 页面中变得非常慢，而且因为太重而无法完成。 有关如何使其更快的任何建议？

Answer 1

性能优化的关键点

• 少选（不要全选onchange）
• 保存不会改变的选择
• 选择元素时尽可能具体

奖励：学习使用else if，因为您的分支变得更加清晰。

代码如下：

$(function () {

  // pre-select things that won't change
  var $sel = $('#p_Selection'); 
  var tableRow = $('.goods .detail-child tr');

  //
  // ONCHANGE EVENT 
  // keep in mind that everything in it will be very costly
  //
  $sel.live('change', function () {

    var type = $sel.attr('value');

    tableRow.each(function (index) {

      // this just makes the code shorter
      var record = '#Record'+index;

      // simple ID selector is enough, since its unique
      var Record_LidExpected =  $(record+'_LidExpected').attr('value');
      var Record_LidObtained =  $(record+'_LidObtained').attr('value');
      var Record_QuantityExpected = $(record+'_QuantityExpected').attr('value');
      var Record_QuantityObtained = $(record+'_QuantityObtained').attr('value');

      if (type == "1") {
        if (Record_LidExpected != Record_LidObtained) {
          $(this).hide();
        } else if (Record_QuantityExpected != Record_QuantityObtained) {
          $(this).hide();
        }
      } else if (type == "2") {
        if (Record_LidExpected == Record_LidObtained) {
          $(this).hide();
        } else if (Record_QuantityExpected == Record_QuantityObtained) {
          $(this).hide();
        }
      } else if (type == "0") {
        $(this).show();
      }
    });
  });
});

Answer 2

在我的重写中你会注意到一些事情。

1. 我省略了$('body').find()，因为它与直接选择#p_Selection 相比没有任何优势。
2. 当使用$() 函数选择input 值时，我将添加this 作为第二个参数。这基本上告诉 jQuery 在 this 中查找输入（在这种情况下，它指的是每个循环中的当前 tr。这里的优点是 jQuery 不需要在整个 DOM 中搜索该特定输入，就在当前的tr 标签内。
3. 我刚刚使用 switch 语句和一些 || 运算符稍微清理了您的 if/else 逻辑。

我认为现在应该运行得更快。

<script type="text/javascript">
  $(function() {

    $('#p_Selection').live('change', function() {
      var type = $(this).val();

      var Record_LidExpected, 
          Record_LidObtained, 
          Record_QuantityExpected, 
          Record_QuantityObtained;

      $('.goods .detail-child tr').each(function(index) {

        Record_LidExpected = $('input[id$=Record['+index+']_LidExpected]', this).val();
        Record_LidObtained = $('input[id$=Record[' + index + ']_LidObtained]', this).val();
        Record_QuantityExpected = $('input[id$=Record[' + index + ']_QuantityExpected]', this).val();
        Record_QuantityObtained = $('input[id$=Record[' + index + ']_QuantityObtained]', this).val();

        switch(type) {
          case "1" :
            if (Record_LidExpected != Record_LidObtained || Record_QuantityExpected != Record_QuantityObtained) {
              $(this).hide();
            }
          break;
          case "2" :
            if (Record_LidExpected == Record_LidObtained || Record_QuantityExpected == Record_QuantityObtained) {
              $(this).hide();
            }
          break;

          case "0":
            $(this).show();
          break;
        }
      });
    });
  });
</script>