未捕获的TypeError:$(...)[index] .hide/show不是函数

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元素的表,每个元素都以某种方式包含我想要搜索的"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 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()其上的任何DOM元素是"阵列"在执行操作.

但$(".mod")[index]获取一个实际的DOM元素的引用,并且DOM元素并不能有一个.hide()或.show()方法.这就是你得到错误的原因$(...)[index].hide is not a function.

要仅对特定索引处的元素调用.hide()或.show()(或其他jQuery方法),可以使用该.eq()方法,该方法创建另一个仅包含指定索引处的元素的jQuery对象.因为结果仍然是一个jQuery对象,所以你可以使用.show()它上面的方法:

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