未捕获的TypeError:$(...)[index] .hide/show不是一个函数 [英] Uncaught TypeError: $(...)[index].hide/show is not a function

问题描述

我正在为我的网站创建jQuery搜索脚本，但是出现以下错误:

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)

我知道是什么原因造成的，但我不知道为什么.我有一个包含多个tr元素的表，每个元素都以某种方式包含我要搜索的"mod"的名称.这是我的搜索脚本(search.js):

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>

推荐答案

$(".mod")创建一个jQuery对象，其中包含对与".mod"选择器匹配的所有DOM元素的引用. jQuery对象是一个类似数组的对象，具有像.hide()和.show()这样的方法，它们可以对数组"中的任何DOM元素执行操作.

$(".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".

但是$(".mod")[index]获得对实际DOM元素的引用，而DOM元素不是具有.hide()或.show()方法.这就是为什么出现错误$(...)[index].hide is not a function的原因.

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.

要仅对特定索引处的元素调用.hide()或.show()(或其他jQuery方法)，可以使用 .eq()方法，它创建另一个jQuery对象，仅包含指定索引处的元素.由于结果仍然是jQuery对象，因此可以在其上使用.show()之类的方法:

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();

这篇关于未捕获的TypeError:$(...)[index] .hide/show不是一个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！