我有一个页面会根据过滤器输入隐藏列表元素。到目前为止，我隐藏了子元素，但我想要做的是隐藏父元素的所有子元素时隐藏它。我很难弄清楚如何根据孩子修改父样式。
$('.filterinput').keyup(function() {
var a = $(this).val();
if (a.length >= 2) {
var containing = $('#list li').filter(function() {
var regex = new RegExp('\\b' + a, 'i');
return regex.test($('a', this).text());
}).slideDown();
$('#list li').not(containing).slideUp();
} else {
$('#list li').slideDown();
$("#groupList li").each(function() {
$(this).show();
})
}
return false;
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-6">
<label class="control-label">Filter Tests</label><br/>
<input class="filterinput" type="text" style="width:100%;">
</div>
<div id "panelGroups">
<ul id="groupList">
<div class="row">
<div class="col-xs-12">
<li class="allergy_panels">
<a style="color:blue; font-size: large;" id="Allergy Panels" onCLick="reply_click(this.id)">Allergy Panels</a>
<ul class="ulChild-allergy_panels" id="list">
<li class="liChild-allergy_panels"><a id="Area 10 (TX/OK)" onClick="reply_click(this.id)">Area 10 (TX/OK)</a></li>
<li class="liChild-allergy_panels"><a id="Total IgE seperate" onClick="reply_click(this.id)">Total IgE seperate</a></li>
<li class="liChild-allergy_panels"><a id="Basic Food Allergy" onClick="reply_click(this.id)">Basic Food Allergy</a></li>
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="arthritis_panel">
<a style="color:blue; font-size: large;" id="Arthritis Panel" onCLick="reply_click(this.id)">Arthritis Panel</a>
<ul class="ulChild-arthritis_panel" id="list">
<li class="liChild-arthritis_panel"><a id="RF" onClick="reply_click(this.id)">RF</a></li>
<li class="liChild-arthritis_panel"><a id="CRP" onClick="reply_click(this.id)">CRP</a></li>
<li class="liChild-arthritis_panel"><a id="CBC" onClick="reply_click(this.id)">CBC</a></li>
<li class="liChild-arthritis_panel"><a id="Uric Acid" onClick="reply_click(this.id)">Uric Acid</a></li>
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="diabetic_profile">
<a style="color:blue; font-size: large;" id="Diabetic Profile" onCLick="reply_click(this.id)">Diabetic Profile</a>
<ul class="ulChild-diabetic_profile" id="list">
<li class="liChild-diabetic_profile"><a id="HgbA1c (1EDTA)" onClick="reply_click(this.id)">HgbA1c (1EDTA)</a></li>
<li class="liChild-diabetic_profile"><a id="C-peptide" onClick="reply_click(this.id)">C-peptide</a></li>
<li class="liChild-diabetic_profile"><a id="Insulin" onClick="reply_click(this.id)">Insulin</a></li>
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="female_hormone">
<a style="color:blue; font-size: large;" id="Female Hormone" onCLick="reply_click(this.id)">Female Hormone</a>
<ul class="ulChild-female_hormone" id="list">
<li class="liChild-female_hormone"><a id="Testosterone(Total)" onClick="reply_click(this.id)">Testosterone(Total)</a></li>
<li class="liChild-female_hormone"><a id="Intact PTH" onClick="reply_click(this.id)">Intact PTH</a></li>
<li class="liChild-female_hormone"><a id="Cortisol" onClick="reply_click(this.id)">Cortisol</a></li>
<li class="liChild-female_hormone"><a id="hCG (female)" onClick="reply_click(this.id)">hCG (female)</a></li>
<li class="liChild-female_hormone"><a id="SHBG" onClick="reply_click(this.id)">SHBG</a></li>
<li class="liChild-female_hormone"><a id="LH (female)" onClick="reply_click(this.id)">LH (female)</a></li>
<li class="liChild-female_hormone"><a id="DHEA-S" onClick="reply_click(this.id)">DHEA-S</a></li>
<li class="liChild-female_hormone"><a id="Anti-TPO" onClick="reply_click(this.id)">Anti-TPO</a></li>
<li class="liChild-female_hormone"><a id="FSH" onClick="reply_click(this.id)">FSH</a></li>
<li class="liChild-female_hormone"><a id="Progesterone" onClick="reply_click(this.id)">Progesterone</a></li>
<li class="liChild-female_hormone"><a id="Estradiol" onClick="reply_click(this.id)">Estradiol</a></li>
<li class="liChild-female_hormone"><a id="Testerone(Free)" onClick="reply_click(this.id)">Testerone(Free)</a></li>
<li class="liChild-female_hormone"><a id="CBC w/Diff (1EDTA)" onClick="reply_click(this.id)">CBC w/Diff (1EDTA)</a></li>
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="heart_health">
<a style="color:blue; font-size: large;" id="Heart Health" onCLick="reply_click(this.id)">Heart Health</a>
<ul class="ulChild-heart_health" id="list">
<li class="liChild-heart_health"><a id="CRPhs" onClick="reply_click(this.id)">CRPhs</a></li>
<li class="liChild-heart_health"><a id="CK" onClick="reply_click(this.id)">CK</a></li>
<li class="liChild-heart_health"><a id="LDL(Direct)" onClick="reply_click(this.id)">LDL(Direct)</a></li>
<li class="liChild-heart_health"><a id="Cholesterol" onClick="reply_click(this.id)">Cholesterol</a></li>
<li class="liChild-heart_health"><a id="Triglycerides" onClick="reply_click(this.id)">Triglycerides</a></li>
<li class="liChild-heart_health"><a id="HDL" onClick="reply_click(this.id)">HDL</a></li>
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="hepatitis">
<a style="color:blue; font-size: large;" id="Hepatitis" onCLick="reply_click(this.id)">Hepatitis</a>
<ul class="ulChild-hepatitis" id="list">
<li class="liChild-hepatitis"><a id="HCV" onClick="reply_click(this.id)">HCV</a></li>
<li class="liChild-hepatitis"><a id="Anti-hBs Quantitative" onClick="reply_click(this.id)">Anti-hBs Quantitative</a></li>
<li class="liChild-hepatitis"><a id="HAV Total" onClick="reply_click(this.id)">HAV Total</a></li>
<li class="liChild-hepatitis"><a id="HBsAg" onClick="reply_click(this.id)">HBsAg</a></li>
<li class="liChild-hepatitis"><a id="HBcAb IgM" onClick="reply_click(this.id)">HBcAb IgM</a></li>
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="immunology">
<a style="color:blue; font-size: large;" id="Immunology" onCLick="reply_click(this.id)">Immunology</a>
<ul class="ulChild-immunology" id="list">
<li class="liChild-immunology"><a id="CA153" onClick="reply_click(this.id)">CA153</a></li>
<li class="liChild-immunology"><a id="CA125" onClick="reply_click(this.id)">CA125</a></li>
<li class="liChild-immunology"><a id="C3" onClick="reply_click(this.id)">C3</a></li>
<li class="liChild-immunology"><a id="C4" onClick="reply_click(this.id)">C4</a></li>
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="metabolic_health">
<a style="color:blue; font-size: large;" id="Metabolic Health" onCLick="reply_click(this.id)">Metabolic Health</a>
<ul class="ulChild-metabolic_health" id="list">
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="nutritional_health">
<a style="color:blue; font-size: large;" id="Nutritional Health" onCLick="reply_click(this.id)">Nutritional Health</a>
<ul class="ulChild-nutritional_health" id="list">
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="pre-natal">
<a style="color:blue; font-size: large;" id="Pre-Natal" onCLick="reply_click(this.id)">Pre-Natal</a>
<ul class="ulChild-pre-natal" id="list">
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="pre_surgical">
<a style="color:blue; font-size: large;" id="Pre Surgical" onCLick="reply_click(this.id)">Pre Surgical</a>
<ul class="ulChild-pre_surgical" id="list">
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="post_surgical">
<a style="color:blue; font-size: large;" id="Post Surgical" onCLick="reply_click(this.id)">Post Surgical</a>
<ul class="ulChild-post_surgical" id="list">
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="std_profile">
<a style="color:blue; font-size: large;" id="STD Profile" onCLick="reply_click(this.id)">STD Profile</a>
<ul class="ulChild-std_profile" id="list">
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="thyroid">
<a style="color:blue; font-size: large;" id="Thyroid" onCLick="reply_click(this.id)">Thyroid</a>
<ul class="ulChild-thyroid" id="list">
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="weight_loss">
<a style="color:blue; font-size: large;" id="Weight Loss" onCLick="reply_click(this.id)">Weight Loss</a>
<ul class="ulChild-weight_loss" id="list">
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="send_out_test">
<a style="color:blue; font-size: large;" id="Send Out Test" onCLick="reply_click(this.id)">Send Out Test</a>
<ul class="ulChild-send_out_test" id="list">
<li class="liChild-send_out_test"><a id="AFP Maternal" onClick="reply_click(this.id)">AFP Maternal</a></li>
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
</ul>
</div>
答案 0 :(得分：1)
我认为您可以使用if语句来检查是否所有子项都被隐藏然后隐藏父项，可能是这样的：
if (!$(child1, child2, child3).is(":visible")){
$(parent).hide();
}
答案 1 :(得分：0)
未测试*
<ul id='sporks'>
<li>0</li>
<li>1</li>
<li>2</li>
</ul>
<script>
$sporks = $('sporks')
$sporks_li = $sporks.find('li')
$sporks_li.each(function(li,index){
$(li).on('click',function(e){
$(this).addClass('hidden')
var hide_parrent = true
var li_array = $sporks_li.toArray()
for(var x; x< li_array.length;x++ ){
if( ! $(li_array[x]).hasClass('hidden')){
hide_parrent = false
break
}
}
if(hide_parrent){
$sporks_li.addClass('hidden')
// other things like say reopen children
}
})
})
</script>
答案 2 :(得分：0)
这仍然有点原始，所以它可以使用一些重构效率，但希望它会照亮你头上的隐形灯泡。尝试添加：
'slow', function(){
if($(this).parent().children('li:visible').length === 0)
$(this).parent().parent().slideUp();
else $(this).parent().parent().slideDown();
}
作为slideUp()中的前两个参数，因此它作为回调运行，'slow'就是第一个参数。
注意：您的样本中有一些空条目（代谢健康，营养健康等）不受此代码的影响，我把它留下了我们认为你的真实数据集中不会有空条目。
HIH
$('.filterinput').keyup(function() {
var a = $(this).val();
if (a.length >= 2) {
var containing = $('#list li').filter(function() {
var regex = new RegExp('\\b' + a, 'i');
return regex.test($('a', this).text());
}).slideDown();
$('#list li').not(containing).slideUp('slow', function(){
if($(this).parent().children('li:visible').length === 0)
$(this).parent().parent().slideUp();
else $(this).parent().parent().slideDown();
});
} else {
$('#list li').slideDown();
$("#groupList li").each(function() {
$(this).show();
})
}
return false;
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-6">
<label class="control-label">Filter Tests</label><br/>
<input class="filterinput" type="text" style="width:100%;">
</div>
<div id "panelGroups">
<ul id="groupList">
<div class="row">
<div class="col-xs-12">
<li class="allergy_panels">
<a style="color:blue; font-size: large;" id="Allergy Panels" onCLick="reply_click(this.id)">Allergy Panels</a>
<ul class="ulChild-allergy_panels" id="list">
<li class="liChild-allergy_panels"><a id="Area 10 (TX/OK)" onClick="reply_click(this.id)">Area 10 (TX/OK)</a></li>
<li class="liChild-allergy_panels"><a id="Total IgE seperate" onClick="reply_click(this.id)">Total IgE seperate</a></li>
<li class="liChild-allergy_panels"><a id="Basic Food Allergy" onClick="reply_click(this.id)">Basic Food Allergy</a></li>
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="arthritis_panel">
<a style="color:blue; font-size: large;" id="Arthritis Panel" onCLick="reply_click(this.id)">Arthritis Panel</a>
<ul class="ulChild-arthritis_panel" id="list">
<li class="liChild-arthritis_panel"><a id="RF" onClick="reply_click(this.id)">RF</a></li>
<li class="liChild-arthritis_panel"><a id="CRP" onClick="reply_click(this.id)">CRP</a></li>
<li class="liChild-arthritis_panel"><a id="CBC" onClick="reply_click(this.id)">CBC</a></li>
<li class="liChild-arthritis_panel"><a id="Uric Acid" onClick="reply_click(this.id)">Uric Acid</a></li>
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="diabetic_profile">
<a style="color:blue; font-size: large;" id="Diabetic Profile" onCLick="reply_click(this.id)">Diabetic Profile</a>
<ul class="ulChild-diabetic_profile" id="list">
<li class="liChild-diabetic_profile"><a id="HgbA1c (1EDTA)" onClick="reply_click(this.id)">HgbA1c (1EDTA)</a></li>
<li class="liChild-diabetic_profile"><a id="C-peptide" onClick="reply_click(this.id)">C-peptide</a></li>
<li class="liChild-diabetic_profile"><a id="Insulin" onClick="reply_click(this.id)">Insulin</a></li>
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="female_hormone">
<a style="color:blue; font-size: large;" id="Female Hormone" onCLick="reply_click(this.id)">Female Hormone</a>
<ul class="ulChild-female_hormone" id="list">
<li class="liChild-female_hormone"><a id="Testosterone(Total)" onClick="reply_click(this.id)">Testosterone(Total)</a></li>
<li class="liChild-female_hormone"><a id="Intact PTH" onClick="reply_click(this.id)">Intact PTH</a></li>
<li class="liChild-female_hormone"><a id="Cortisol" onClick="reply_click(this.id)">Cortisol</a></li>
<li class="liChild-female_hormone"><a id="hCG (female)" onClick="reply_click(this.id)">hCG (female)</a></li>
<li class="liChild-female_hormone"><a id="SHBG" onClick="reply_click(this.id)">SHBG</a></li>
<li class="liChild-female_hormone"><a id="LH (female)" onClick="reply_click(this.id)">LH (female)</a></li>
<li class="liChild-female_hormone"><a id="DHEA-S" onClick="reply_click(this.id)">DHEA-S</a></li>
<li class="liChild-female_hormone"><a id="Anti-TPO" onClick="reply_click(this.id)">Anti-TPO</a></li>
<li class="liChild-female_hormone"><a id="FSH" onClick="reply_click(this.id)">FSH</a></li>
<li class="liChild-female_hormone"><a id="Progesterone" onClick="reply_click(this.id)">Progesterone</a></li>
<li class="liChild-female_hormone"><a id="Estradiol" onClick="reply_click(this.id)">Estradiol</a></li>
<li class="liChild-female_hormone"><a id="Testerone(Free)" onClick="reply_click(this.id)">Testerone(Free)</a></li>
<li class="liChild-female_hormone"><a id="CBC w/Diff (1EDTA)" onClick="reply_click(this.id)">CBC w/Diff (1EDTA)</a></li>
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="heart_health">
<a style="color:blue; font-size: large;" id="Heart Health" onCLick="reply_click(this.id)">Heart Health</a>
<ul class="ulChild-heart_health" id="list">
<li class="liChild-heart_health"><a id="CRPhs" onClick="reply_click(this.id)">CRPhs</a></li>
<li class="liChild-heart_health"><a id="CK" onClick="reply_click(this.id)">CK</a></li>
<li class="liChild-heart_health"><a id="LDL(Direct)" onClick="reply_click(this.id)">LDL(Direct)</a></li>
<li class="liChild-heart_health"><a id="Cholesterol" onClick="reply_click(this.id)">Cholesterol</a></li>
<li class="liChild-heart_health"><a id="Triglycerides" onClick="reply_click(this.id)">Triglycerides</a></li>
<li class="liChild-heart_health"><a id="HDL" onClick="reply_click(this.id)">HDL</a></li>
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="hepatitis">
<a style="color:blue; font-size: large;" id="Hepatitis" onCLick="reply_click(this.id)">Hepatitis</a>
<ul class="ulChild-hepatitis" id="list">
<li class="liChild-hepatitis"><a id="HCV" onClick="reply_click(this.id)">HCV</a></li>
<li class="liChild-hepatitis"><a id="Anti-hBs Quantitative" onClick="reply_click(this.id)">Anti-hBs Quantitative</a></li>
<li class="liChild-hepatitis"><a id="HAV Total" onClick="reply_click(this.id)">HAV Total</a></li>
<li class="liChild-hepatitis"><a id="HBsAg" onClick="reply_click(this.id)">HBsAg</a></li>
<li class="liChild-hepatitis"><a id="HBcAb IgM" onClick="reply_click(this.id)">HBcAb IgM</a></li>
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="immunology">
<a style="color:blue; font-size: large;" id="Immunology" onCLick="reply_click(this.id)">Immunology</a>
<ul class="ulChild-immunology" id="list">
<li class="liChild-immunology"><a id="CA153" onClick="reply_click(this.id)">CA153</a></li>
<li class="liChild-immunology"><a id="CA125" onClick="reply_click(this.id)">CA125</a></li>
<li class="liChild-immunology"><a id="C3" onClick="reply_click(this.id)">C3</a></li>
<li class="liChild-immunology"><a id="C4" onClick="reply_click(this.id)">C4</a></li>
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="metabolic_health">
<a style="color:blue; font-size: large;" id="Metabolic Health" onCLick="reply_click(this.id)">Metabolic Health</a>
<ul class="ulChild-metabolic_health" id="list">
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="nutritional_health">
<a style="color:blue; font-size: large;" id="Nutritional Health" onCLick="reply_click(this.id)">Nutritional Health</a>
<ul class="ulChild-nutritional_health" id="list">
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="pre-natal">
<a style="color:blue; font-size: large;" id="Pre-Natal" onCLick="reply_click(this.id)">Pre-Natal</a>
<ul class="ulChild-pre-natal" id="list">
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="pre_surgical">
<a style="color:blue; font-size: large;" id="Pre Surgical" onCLick="reply_click(this.id)">Pre Surgical</a>
<ul class="ulChild-pre_surgical" id="list">
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="post_surgical">
<a style="color:blue; font-size: large;" id="Post Surgical" onCLick="reply_click(this.id)">Post Surgical</a>
<ul class="ulChild-post_surgical" id="list">
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="std_profile">
<a style="color:blue; font-size: large;" id="STD Profile" onCLick="reply_click(this.id)">STD Profile</a>
<ul class="ulChild-std_profile" id="list">
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="thyroid">
<a style="color:blue; font-size: large;" id="Thyroid" onCLick="reply_click(this.id)">Thyroid</a>
<ul class="ulChild-thyroid" id="list">
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="weight_loss">
<a style="color:blue; font-size: large;" id="Weight Loss" onCLick="reply_click(this.id)">Weight Loss</a>
<ul class="ulChild-weight_loss" id="list">
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<li class="send_out_test">
<a style="color:blue; font-size: large;" id="Send Out Test" onCLick="reply_click(this.id)">Send Out Test</a>
<ul class="ulChild-send_out_test" id="list">
<li class="liChild-send_out_test"><a id="AFP Maternal" onClick="reply_click(this.id)">AFP Maternal</a></li>
<hr>
<br/><br/>
</ul>
</li>
</div>
</div>
</ul>
</div>