Javascript 如何使用jQuery隐藏/显示父元素

我有一个jquery过滤器，它过滤

input#box

中包含字符串的元素并隐藏它们。 我已经将首字母添加到HTML中，我想在隐藏所有包含的元素时隐藏它们。 我尝试了jQuery

父母

和

最近的

的几种组合，但没有成功

$（'#box'）.keyup（函数（）{
var valThis=$（this.val（）.toLowerCase（）；
如果（valThis==“”）{
$（'.indicatione'）.show（）；
}否则{
$（'.indicatione'）。每个（函数（）{
var text=$（this.text（）.toLowerCase（）；
if（text.indexOf（valThis）>=0）{
$（this.show（）；
}否则{
$（this.hide（）；
$（this）.parents（'.indicatione_wrapper'）.hide（）；/*此行不起作用*/
}
});
};
});

A
B
除了调用了
$（this）.parents（'.indiciazione\u wrapper'）.hide（）
来隐藏该元素之外，您的代码运行得很好，但是您再也没有显示过它

我已将
.indiciazione\u包装器
选择器添加到此部分

if（valThis==“”）{
$（'.indiciazione，.indiciazione_包装器'）.show（）；
}否则{。。。

然后我添加了一些BG颜色，以显示正确的元素正在隐藏和显示


$（'#box'）.keyup（函数（）{
var valThis=$（this.val（）.toLowerCase（）；
如果（valThis==“”）{
$（'.indiciazione，.indiciazione_包装器'）.show（）；
}否则{
$（'.indicatione'）。每个（函数（）{
var text=$（this.text（）.toLowerCase（）；
if（text.indexOf（valThis）>=0）{
$（this.show（）；
}否则{
$（this.hide（）；
$（this）.parents（'.indicatione_wrapper'）.hide（）；/*此行不起作用*/
}
});
};
})；
.indiciazione\u包装器{
背景：浅蓝色；
}
1.吲哚醌{
背景：粉红色；
}

A
B
我不认为有必要使用
$（this）.hide（）
，因为您已经隐藏了父div

将代码更改为：


$（'#box'）.keyup（函数（）{
var valThis=$（this.val（）.toLowerCase（）；
如果（valThis==“”）{
$（'.indicatione_包装器'）.show（）；
}否则{
$（'.indicatione'）。每个（函数（）{
var text=$（this.text（）.toLowerCase（）；
if（text.indexOf（valThis）>=0）{
$（this.show（）；
}否则{
$（this）.parents（'.indicatione_wrapper'）.hide（）；
}
});
};
})；

A
B
当所有包含的元素都隐藏时，无法隐藏初始字母，因为您的初始标题不包含要隐藏的元素

将您的子元素（“AAA”、“ABC”）包装在包含首字母“A”的div中。然后您可以使用parent（）选择器选择它们

<div class="col-sm-12 mt-3" id="lettera"><strong>A</strong> <!-- REMOVE here-->
  <div class="col-sm-4 col-md-3 d-flex indicazione_wrapper">
    <div class="card card-body flex-fill my-3">
      <a class="indicazione" href="#">AAA</a>
    </div>
  </div>
</div> <!-- ADD here-->

从
if
中删除不必要的$（this）.parents（'.indicatione_wrapper'）.hide（）；并添加此代码

if($(this).closest('.indicazione_wrapper').find('.indicazione:hidden').length ==                            
    $(this).closest('.indicazione_wrapper').find('.indicazione').length) {
        $(this).closest('.indicazione_wrapper').first().hide();
}

你需要把你的东西包起来

<div class="indicazione_wrapper"> ... </div>

。。。


$（'#box'）.keyup（函数（）{
var valThis=$（this.val（）.toLowerCase（）；
如果（valThis==“”）{
$（'.indicatione'）.show（）；
}否则{
$（'.indicatione'）。每个（函数（）{
$（this）.closest（'.indicatione_wrapper'）.first（）.show（）；/=0）{
$（this.show（）；
}否则{
$（this.hide（）；
}
//如果所有项目都隐藏，则隐藏后者
if（$（this）.closest（'.indiciazione\u wrapper'）.find（'.indiciazione:hidden'）.length==$（this）.closest（'.indiciazione\u wrapper'）.find（'.indiciazione'）.length）{
$（this）.closest（'.indicatizione_wrapper'）.first（）.hide（）；
}
});
};
})；

A
B
.parent（）
没有最后的
s
？好的，这是真的，但我需要隐藏
div#letter a
，它也没有隐藏在代码中…您在问题中没有提到，正在检查它。是的，我已经“我已经将初始字母添加到HTML中，我想在隐藏所有包含的元素时隐藏它们。”
<div class="indicazione_wrapper"> ... </div>