Uncaught TypeError: $(...)[index].hide/show is not a function

Question

我正在为我的站点创建一个 jQuery 搜索脚本，但我收到以下错误：

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

我知道是什么原因造成的，但我就是不知道为什么。我有一个包含多个 tr 元素的 table，每个元素都以某种方式包含我要搜索的 "mod" 的名称。这是我的搜索脚本 (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());
            })
        }
    })
})

这是我要搜索的 table：

<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") 创建一个 jQuery 对象，其中包含对与 ".mod" 选择器匹配的任何 DOM 元素的引用。 jQuery 对象是一个类似数组的对象，其方法如 .hide() 和 .show() 对 "array" 中的任何 DOM 元素执行操作。

但是 $(".mod")[index] 获得了对实际 DOM 元素的引用，而 DOM 元素没有 .hide()或 .show() 方法。这就是您收到错误 $(...)[index].hide is not a function.

的原因

要仅在特定索引处的元素上调用 .hide() 或 .show()（或其他 jQuery 方法），您可以使用 .eq() method，它会创建另一个jQuery 对象仅包含指定索引处的元素。因为结果仍然是一个 jQuery 对象，所以你可以在它上面使用像 .show() 这样的方法：

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

Uncaught TypeError: $(...)[index].hide/show is not a function

Uncaught TypeError: $(...)[index].hide/show is not a function

html

javascript

search

jquery

children