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

Question

如果 tr 中的输入符合特定条件，我会尝试将 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>