Javascript 单击按钮返回所有链接

我有一个包含大量链接的页面

我集成了一个搜索框，用户可以输入链接名称，当他们点击“搜索”按钮时，它会返回包含用户输入内容的所有链接：

以下是本页的HTML部分：

---

---

现在我还有一个清晰的按钮。。当用户点击该按钮时，我希望所有滑块、标题、ul、li和链接都返回，而不需要页面刷新

以下是我到目前为止对该按钮的了解：

---

---

举个例子。。如果我是用户并在搜索框中键入

文档1

。。点击search，它将返回头

第一个头

，下面是

文档1

现在如果我点击清除搜索。。它将返回我所有的

h4

元素，但它们下面没有任何内容，除了

第一个标题
元素下面有
文档1
。。因此，它保留原始搜索，只返回其余的
h4
元素

所以我的问题是，如何在单击“清除搜索”按钮时返回所有内容？
这将在按键或粘贴时实时过滤。当用户在搜索中键入内容时，如果链接包含文本，它将隐藏不包含文本的链接，并显示包含文本的链接。随着值的更改，它将根据搜索的值显示或隐藏

编辑：搜索现在绑定到Button


let filter=function（）{
$filter=$（“#搜索过滤器”）.val（）；
$。每个（$（'a'），函数（k，v）{
设heading='#'+$（v）.closest（'div'）.attr（'data-bind'）；
设sibs=$（v.parent（）.sibles（）；
if（v.innerText.toLowerCase（）.indexOf（$filter）>-1）{
//展示
$（v）.最近（'li'）.show（）；
}
否则{
//隐藏
$（v）.最近（'li'）.hide（）；
}
});
}
$（'searchBtn'）。在（'click'，filter'）；
$（'#clrBtn'）。在（'click'，function（）上{
$（“#搜索过滤器”）.val（“”）；
过滤器（）；
});

一第一标题





第二个标题




这将在按键或粘贴时实时过滤。当用户在搜索中键入内容时，如果链接包含文本，它将隐藏不包含文本的链接，并显示包含文本的链接。随着值的更改，它将根据搜索的值显示或隐藏

编辑：搜索现在绑定到Button


let filter=function（）{
$filter=$（“#搜索过滤器”）.val（）；
$。每个（$（'a'），函数（k，v）{
设heading='#'+$（v）.closest（'div'）.attr（'data-bind'）；
设sibs=$（v.parent（）.sibles（）；
if（v.innerText.toLowerCase（）.indexOf（$filter）>-1）{
//展示
$（v）.最近（'li'）.show（）；
}
否则{
//隐藏
$（v）.最近（'li'）.hide（）；
}
});
}
$（'searchBtn'）。在（'click'，filter'）；
$（'#clrBtn'）。在（'click'，function（）上{
$（“#搜索过滤器”）.val（“”）；
过滤器（）；
});

一第一标题





第二个标题




我已经用我已有的东西解决了这个问题：

$("#ButtonClearSearch").click(function () {
    $("#SearchLink").val("");
    $('.slider').each(function() {
        $(this).prev('h4').show();
        $(this).children().each(function () {
           $('ul li').show();
           $('a').show();
        });
    });
});

我已经用我已有的东西解决了这个问题：

$("#ButtonClearSearch").click(function () {
    $("#SearchLink").val("");
    $('.slider').each(function() {
        $(this).prev('h4').show();
        $(this).children().each(function () {
           $('ul li').show();
           $('a').show();
        });
    });
});

$（this）.sibbines（'h4'）.show（）
@TricksfortheWeb仍然只返回
h4
元素。。下面什么都没有。只有
h4
元素下面有内容，它们是
h4
元素，包含用户搜索的链接，将h4和div包装在div中，然后切换包装div。@TricksfortheWeb可以显示一些代码吗？还是小提琴？@TricksfortheWeb我已将
h4
和
div
放入容器div中，但它仍然不工作
$（this）。兄弟姐妹（'h4'）。show（）
@TricksfortheWeb仍然只返回
h4
元素。。下面什么都没有。只有
h4
元素下面有内容，它们是
h4
元素，包含用户搜索的链接，将h4和div包装在div中，然后切换包装div。@TricksfortheWeb可以显示一些代码吗？还是小提琴？@TricksfortheWeb我已经将
h4
和
div
放入容器div中，但它仍然不起作用。我希望在单击按钮时返回所有内容。。我不需要这在实时。我喜欢你的解决方案，但这不是我要找的。@B孩子哦，别担心。我编辑了这篇文章，因此它现在绑定到了一个搜索按钮，并且它还有一个清晰功能的绑定。你想让它在没有结果的情况下隐藏标题吗？我已经发布了我的答案。我已经弄明白了。谢谢你的帮助。我想按一下按钮返回所有内容。。我不需要这在实时。我喜欢你的解决方案，但这不是我要找的。@B孩子哦，别担心。我编辑了这篇文章，因此它现在绑定到了一个搜索按钮，并且它还有一个清晰功能的绑定。你想让它在没有结果的情况下隐藏标题吗？我已经发布了我的答案。我已经弄明白了。谢谢你的帮助。
$("#ButtonClearSearch").click(function () {
    $("#SearchLink").val("");
    $('.slider').each(function() {
        $(this).prev('h4').show();
    });
});

$("#ButtonClearSearch").click(function () {
    $("#SearchLink").val("");
    $('.slider').each(function() {
        $(this).prev('h4').show();
        $(this).children().each(function () {
           $('ul li').show();
           $('a').show();
        });
    });
});