我有一份按美国州分组的地址列表。状态名称是H4标签，地址是每个州的一个无序列表中的li标签。有些地址是特殊的，并且使用类名“partner”指定。
我在页面上有一个复选框，选中后，将通过jQuery关闭和打开所有合作伙伴位置。如果一个特定的状态隐藏了它的所有位置，我也希望隐藏该状态的H4标记。我的想法是搜索所有没有li子容器的父容器的DOM，然后隐藏它们，但我不知道如何让jQuery找到它们，现在DOM已被更改。也许我说这一切都错了。
javascript尝试过：
var partner = $('.partner');
$('#include-partner-locations').change(function() {
if (this.checked) {
partner.fadeIn(500);
} else {
partner.fadeOut(500);
}
});body {
font-family: helvetica;
color: #333;
}
ul {
padding: 0;
list-style: none;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
#address-directory {
font-size: 13px;
}
li.location-name {
float: left;
display: block;
width: 250px;
margin-right: 10px;
margin-bottom: 20px;
}
.map {
padding: 3px 8px 6px 8px;
margin-top: 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-decoration: none;
background-color: #CCCCCC;
color: #333333;
display: inline-block;
}
.partner:after {
content: ' *';
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div style="float:right; margin-top:25px; font-size:11px;">
<input type="checkbox" checked="checked" id="include-partner-locations">
<label for="include-partner-locations">Include partner locations</label>
</div>
<p style="clear:both;">* Partner location</p>
<div id="address-directory">
<section>
<h4>Arizona</h4>
<ul class="clearfix">
<li class="location-name">Phoenix
<br>817 East Indian School Road
<br>Phoenix, AZ 85014
<br>
<a class="map" href="http://maps.google.com/maps?q=817+East+Indian+School+Road+Phoenix+85014+United%20States">map</a>
</li>
<li class="location-name">Tempe
<br>1775 W. University Drive
<br>Tempe, AZ 85281
<br>
<a class="map" href="http://maps.google.com/maps?q=1775+W.+University+Drive+Tempe+85281+United%20States">map</a>
</li>
<li class="location-name partner">Tucson
<br>234 East 6th Street
<br>Tucson, AZ 85705
<br>
<a class="map" href="http://maps.google.com/maps?q=234+East+6th+Street+Tucson+85705+United%20States">map</a>
</li>
<li class="location-name">Tucson
<br>2903 E. Broadway Blvd.
<br>Tucson, AZ 85716
<br>
<a class="map" href="http://maps.google.com/maps?q=2903+E.+Broadway+Blvd.+Tucson+85716+United%20States">map</a>
</li>
</ul>
</section>
<section>
<h4>Florida</h4>
<ul class="clearfix">
<li class="location-name partner">Coral Gables
<br>275 University Drive
<br>Coral Gables, FL 33134
<br>
<a class="map" href="http://maps.google.com/maps?q=275+University+Drive+Coral+Gables+33134+United%20States">map</a>
</li>
<li class="location-name partner">Fort Lauderdale
<br>801 N. Andrews Ave.
<br>Fort Lauderdale, FL 33311
<br>
<a class="map" href="http://maps.google.com/maps?q=801+N.+Andrews+Ave.+Fort+Lauderdale+33311+United%20States">map</a>
</li>
<li class="location-name partner">Maitland
<br>160 Candace Drive
<br>Maitland, FL 32751
<br>
<a class="map" href="http://maps.google.com/maps?q=160+Candace+Drive+Maitland+32751+United%20States">map</a>
</li>
<li class="location-name partner">Miami
<br>7451 SW 50th Terrace
<br>Miami, FL 33155
<br>
<a class="map" href="http://maps.google.com/maps?q=7451+SW+50th+Terrace+Miami+33155+United%20States">map</a>
</li>
</ul>
</section>
<section>
<h4>Arkansas</h4>
<ul class="clearfix">
<li class="location-name">Bentonville
<br>3204 Moberly Lane
<br>Bentonville, AR 72712
<br>
<a class="map" href="http://maps.google.com/maps?q=3204+Moberly+Lane+Bentonville+72712+United%20States">map</a>
</li>
<li class="location-name">Conway
<br>1101 Museum Road
<br>Conway, AR 72032
<br>
<a class="map" href="http://maps.google.com/maps?q=1101+Museum+Road+Conway+72032+United%20States">map</a>
</li>
<li class="location-name">Fayetteville
<br>20 Township
<br>Fayetteville, AR 72703
<br>
<a class="map" href="http://maps.google.com/maps?q=20+Township+Fayetteville+72703+United%20States">map</a>
</li>
<li class="location-name">Ft. Smith
<br>906 Towson Avenue
<br>Ft. Smith, AR 72901
<br>
<a class="map" href="http://maps.google.com/maps?q=906+Towson+Avenue+Ft.+Smith+72901+United%20States">map</a>
</li>
<li class="location-name">Little Rock
<br>815 Main
<br>Little Rock, AR 72201
<br>
<a class="map" href="http://maps.google.com/maps?q=815+Main+Little+Rock+72201+United%20States">map</a>
</li>
</ul>
</section>
</div>
答案 0 :(得分：1)
您可以使用.filter()，.get()，.every()，.promise()，.prev()来过滤每个ul的{{1}}元素当所有li元素都已完成动画时，后代元素的style display等于"none";在已过滤的.partner元素的前一个元素同级.fadeOut()上调用h4
ulvar partner = $('.partner');
$('#include-partner-locations').change(function() {
if (this.checked) {
partner.fadeIn(500);
$("h4").fadeIn(500)
} else {
var ul;
partner.fadeOut(500, function() {
ul = $("ul").filter(function(i, el) {
return $("li", this).get().every(function(elem) {
return elem.style.display === "none"
})
})
})
partner.promise().then(function() {
ul.prev("h4").fadeOut()
})
}
});body {
font-family: helvetica;
color: #333;
}
ul {
padding: 0;
list-style: none;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
#address-directory {
font-size: 13px;
}
li.location-name {
float: left;
display: block;
width: 250px;
margin-right: 10px;
margin-bottom: 20px;
}
.map {
padding: 3px 8px 6px 8px;
margin-top: 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-decoration: none;
background-color: #CCCCCC;
color: #333333;
display: inline-block;
}
.partner:after {
content: ' *';
}
jsfiddle https://jsfiddle.net/rn2vw1mq/2/
答案 1 :(得分：1)
尝试将JavaScript更改为以下内容：
$('#include-partner-locations').change(function() {
if (this.checked) {
$("h4").fadeIn(500);
$(".partner").fadeIn(500);
}
else {
$("section").each(function(index) {
$(".partner").fadeOut(500);
if ($(this).children("ul").children(".location-name").length == $(this).children("ul").children(".partner").length) {
$(this).children("h4").fadeOut(500);
}
});
}
});