I am creating a jQuery search script for my site but I am getting the following errors:

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

I know what is causing it but I just don't know why. I have a table with multiple tr elements and each of them somehow contains the name of the "mod" that I want to search through. Here's my search script (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());
            })
        }
    })
})

Here's my my table that I want to search through:

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

I am creating a jQuery search script for my site but I am getting the following errors:

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

I know what is causing it but I just don't know why. I have a table with multiple tr elements and each of them somehow contains the name of the "mod" that I want to search through. Here's my search script (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());
            })
        }
    })
})

Here's my my table that I want to search through:

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

• javascript
• jquery
• html
• search
• children

• 1 @nnnnn Thanks! That fixed it, I'll mark it as solved. EDIT: I can't, it requires an answer response. – Jacob Gunther Commented Aug 7, 2016 at 4:53
• OK, I expanded my ment a little into an answer. – nnnnnn Commented Aug 7, 2016 at 7:15
• Another alternative is to use $('.mod').each(...); and refer to the current element within the callback with this. – php-dev Commented Aug 7, 2016 at 7:24

1 Answer 1

$(".mod") creates a jQuery object containing references to whatever DOM elements matched the ".mod" selector. A jQuery object is an array-like object with methods like .hide() and .show() that perform an operation on whatever DOM elements are in the "array".

But $(".mod")[index] gets a reference to an actual DOM element, and DOM elements do not have a .hide() or .show() method. That's why you get the error $(...)[index].hide is not a function.

To call .hide() or .show() (or other jQuery methods) on just the element at a particular index, you can use the .eq() method, which creates another jQuery object containing just the element at the specified index. Because the result is still a jQuery object you can then use methods like .show() on it:

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