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元素的表，每个元素都以某种方式包含＆＃34; mod＆＃34;我想搜索一下。这是我的搜索脚本（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() method，它创建另一个仅包含元素的jQuery对象在指定的索引处。因为结果仍然是jQuery对象，所以您可以使用.show()之类的方法：

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

未捕获的TypeError：$（...）[index] .hide / show不是函数

1 个答案: