javascript - 在 keyup() 之后迭代时 jQuery 卡住

Question

我有一个问题，jQuery 在输入框的 keyup 上卡住了几秒钟。我试图根据用户输入的值显示/隐藏表格的行，同时使用 jQuery 操作一些边框。

例如，用户输入“3”。在 keyup 上，所有带有“3”的行都应该保持可见，而没有它的行将隐藏。我已将问题隔离到 javascript 的注释行。当处于事件状态时，它们就是导致问题的原因。将它们注释掉可以纠正我的卡住问题，但我试图实现的边框样式不正确。为什么会这样？

JS:

$('#narrow').keyup(function () {
    var text = $(this).val().toLowerCase();
    $('.multiples-table tbody tr').each(function () {
        if ($(this).text().toLowerCase().indexOf(text) == -1) {
            $(this).hide();

            $('.table-wrapper').css('border', 0);
            $('.multiples-table').css('border-left', '2px solid #ccc');
            $('.multiples-table').css('border-top', '2px solid #ccc');
        }
        else {
            $(this).show();

            //$('.table-wrapper').css('border', '2px solid #ccc');
            //$('.multiples-table').css('border-left', 0);
            //$('.multiples-table').css('border-top', 0);
        }
    });
});

HTML:

<input type="text" id="narrow" class="search" placeholder="Filter" value="">
    <div class="table-wrapper">
        <table class="multiples-table">
            <tbody>
                <tr>
                    <td>$10,000</td>
                    <td>$3.40</td>
                    <td>
                        <asp:Button ID="btn1" Text="Select" runat="server" />
                    </td>
                </tr>
                <tr>
                    <td>$20,000</td>
                    <td>$5.10</td>
                    <td>
                        <asp:Button ID="Button1" Text="Select" runat="server" />
                    </td>
                </tr>
           </tbody>
       </table>
    </div>

Answer 1

尝试推迟 css 直到循环结束:

$(function() {



  $('#narrow').keyup(function() {
    var shouldSetBorder = false;

    var text = $(this).val().toLowerCase();
    $('.multiples-table tbody tr').each(function() {
      if ($(this).text().toLowerCase().indexOf(text) == -1) {
        $(this).hide();
        shouldSetBorder = false;
      } else {
        $(this).show();
        shouldSetBorder = true;
      }
    });

    if (shouldSetBorder) {
      $('.table-wrapper').css('border', '2px solid #ccc');
      $('.multiples-table').css('border-left', 0);
      $('.multiples-table').css('border-top', 0);
    } else {
      $('.table-wrapper').css('border', 0);
      $('.multiples-table').css('border-left', '2px solid #ccc');
      $('.multiples-table').css('border-top', '2px solid #ccc');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="narrow" class="search" placeholder="Filter" value="">
<div class="table-wrapper">
  <table class="multiples-table">
    <tbody>
      <tr>
        <td>$10,000</td>
        <td>$3.40</td>
        <td>
          <asp:Button ID="btn1" Text="Select" runat="server" />
        </td>
      </tr>
      <tr>
        <td>$20,000</td>
        <td>$5.10</td>
        <td>
          <asp:Button ID="Button1" Text="Select" runat="server" />
        </td>
      </tr>
    </tbody>
  </table>
</div>