jQuery Einfrieren beim Iterieren nach keyup()

-1

Ich habe ein Problem mit jQuery Einfrieren für mehrere Sekunden auf KeyUp eines Eingabefeldes. Ich versuche, Zeilen einer Tabelle basierend auf dem Wert der Benutzereingabe ein-/auszublenden und gleichzeitig einige Ränder mit jQuery zu bearbeiten.jQuery Einfrieren beim Iterieren nach keyup()

Zum Beispiel gibt ein Benutzer '3' ein. Bei der Schlüsseleingabe sollten alle Zeilen mit einer '3' sichtbar bleiben, während die Zeilen ohne diese '' '' '' nicht angezeigt werden. Ich habe das Problem auf die kommentierten Zeilen von Javascript isoliert. Wenn sie aktiv sind, sind sie das, was das Problem verursacht. Sie zu kommentieren behebt das Problem mit dem Einfrieren, aber die Randstile, die ich erreichen möchte, sind falsch. Warum sollte das der Fall sein?

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>

Quelle

2017-01-31 noclist

Sie verändern die cs s des Tisches innerhalb Ihres 'each' und ändert es immer und immer wieder. Kannst du nicht innerhalb der Schleife eine Flagge setzen und dann die CSS nur einmal außerhalb der Schleife ändern? –

Eine Empfehlung: Versuchen Sie, die abgefragten Elemente zwischenzuspeichern, wenn Sie können. Speichern Sie zum Beispiel '$ ('. Multiples-table')' und wenden Sie CSS auf die Variable an, anstatt das DOM erneut nach Elementen mit der Klasse '' multiple-table '' abzufragen. Bei einer großen Anzahl von Elementen kann dies einen merklichen Unterschied ausmachen. Auch die CSS-Eigenschaft 'border-left' /' border-right' hat keine "0" als akzeptablen Wert. 'none' wäre eine gültige Option, um' border-left' oder 'border-top' zu setzen, um keinen Rahmen anzuzeigen. 'border-width' würde andererseits" 0 "als akzeptablen Wert haben. –

Tipp: '.toLowerCase()' ist für Zahlen irrelevant. – melancia

Versuchen Sie, die CSS zu verschieben, bis Schleife beendet ist:

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

Quelle

2017-01-31 21:33:18 Yaser

jQuery Einfrieren beim Iterieren nach keyup()

Antwort

Verwandte Themen