Javascript 隐藏/显示后未显示父兄弟姐妹

我有一个简单的页面内搜索功能，只显示包含搜索词的主题

每个部分都有一个标题，一个

-我想显示未隐藏块的标题

问题：搜索后，

h2

标题并不总是显示出来

失败/成功示例：

其中一个标题是

投诉和取消

——标题为：

如何取消

如果搜索

how do

，您将看到第一个块显示，带有标题。。。标题为

的第二个块将引导

消失。这是正确的

如果再次搜索

I cancel

，则第二个块将消失，这是正确的，但第一个块的标题也将隐藏，这是不应该的

这是javascript：

$("#faq_search").on("input", function () {
        var v = $(this).val().toLowerCase();
        $(".vc_tta-panel").each(function () {
            var eachPlace = $(this).html().toLowerCase();
            if (v != "" && eachPlace.search(v) == -1) {
                $(this).parent().parent().parent().siblings('h2').hide();
                $(this).fadeOut();

            } else {
                $(this).fadeIn('fast', function(){
                    $(this).parent().parent().parent().siblings('h2').show();   
                });
            }
        });
    });

---

有更好的方法吗？

问题是，根据节中的匹配顺序，

show

之后可能会出现

h2

的

隐藏

快速解决方案是首先执行所有隐藏，然后显示：

$("#faq_search").on("input", function () {
    var v = $(this).val().toLowerCase();
    $(".vc_tta-panel").each(function () {
        var eachPlace = $(this).html().toLowerCase();
        if (v != "" && eachPlace.search(v) == -1) {
            $(this).closest('.vc_tta').siblings('h2').hide();
            $(this).fadeOut();
        }
    });
    $(".vc_tta-panel").each(function () {
        var eachPlace = $(this).html().toLowerCase();
        if (v == "" || eachPlace.search(v) > -1) {
            $(this).fadeIn('fast', function(){
                $(this).closest('.vc_tta').siblings('h2').show();   
            });
        }
    });
});

JSFiddle:

笔记：

parent（）.parent（）.parent（）
是不可维护的解决方案。对DOM结构的任何更改都会破坏代码。相反，请使用带有适当目标选择器的
closest（）
。这样更短更安全