Uncaught Typeerror: $ (...) [index] .Hide/show ist keine Funktion

Question

Ich bin eine jQuery Suche Skript für meine Website zu schaffen, aber ich erhalte die folgenden Fehler:

Uncaught TypeError: $(...)[index].hide is not a function (search.js:9) 
Uncaught TypeError: $(...)[index].show is not a function (search.js:7) 

Ich weiß, Was verursacht es, aber ich weiß einfach nicht warum. Ich habe eine Tabelle mit mehreren tr-Elementen und jeder von ihnen enthält irgendwie den Namen der "Mod", die ich durchsuchen möchte. Hier ist mein Suchskript (Search.js):

var keystroke = 0; 
$("#simpleSearch").on("keyup", function() { 
    keystroke = keystroke + 1; 
    $.each($(".mod"), function(index, value) { 
     var searchQuery = document.getElementById("simpleSearch").value; 
     if (searchQuery == "") { 
      $(".mod")[index].show(); 
     } else { 
      $(".mod")[index].hide().filter(function() { 
       return value.children[0].children[0].value.toLowerCase().includes(searchQuery.toLowerCase()); 
      }) 
     } 
    }) 
}) 

Hier ist meine meine Tabelle, die ich mag durchsuchen:

<table class="table table-hover table-versions-hover modlist"> 
    <thead> 
     <tr> 
      <th> 
       Mod Name 
      </th> 
      <th> 
       Author(s) 
      </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="mod"> 
      <th> 
       <a href="Mod%20Link" target="_blank">Mod Name</a> 
       <p> 
        This is the description of the mod. This can include any 
        information on what it does or how it works. This 
        description can only be 2 lines long, nothing over, not 
        even a little bit. 
       </p> 
       <span data-toggle="tooltip" data-placement="top" title= 
       "Tooltip on top" class= 
       "label label-default">Universal</span> 
      </th> 
      <th> 
       Author(s) 
      </th> 
     </tr> 
     <tr class="mod"> 
      <th> 
       <a href="Mod%20Link" target="_blank">Mod Name #2</a> 
       <p> 
        This is the description of the mod. This can include any 
        information on what it does or how it works. This 
        description can only be 2 lines long, nothing over, not 
        even a little bit. 
       </p> 
       <span data-toggle="tooltip" data-placement="top" title= 
        "Tooltip on top" class= 
        "label label-default">Universal</span> 
      </th> 
      <th> 
       Author(s) 
      </th> 
     </tr> 
    </tbody> 
</table> 

Answer 1

$(".mod") erstellt ein jQuery-Objekt Verweise auf unabhängig von DOM-Elementen entsprach den ".mod" Selektor enthält, . Ein jQuery-Objekt ist ein Array-artiges Objekt mit Methoden wie und .show(), die eine Operation für alle DOM-Elemente im "Array" ausführen.

Aber $(".mod")[index] bekommt einen Verweis auf ein tatsächliches DOM-Element, und DOM-Elemente tun nicht eine .hide() oder .show() Methode haben. Deshalb erhalten Sie den Fehler $(...)[index].hide is not a function.

zu nennen .hide() oder .show() (oder andere Methoden jQuery) auf nur das Element an einem bestimmten Index, können Sie die .eq() method verwenden können, die am angegebenen Index nur das Element enthält, ein anderes jQuery-Objekt erstellt. Da das Ergebnis immer noch ein jQuery-Objekt ist, können Sie dann Methoden wie .show() darauf anwenden:

$(".mod").eq(index).show();