У меня есть список адресов, которые сгруппированы по штату США. Имена состояний - это теги H4, а адреса - это теги li в одном неупорядоченном списке для каждого состояния. Некоторые из адресов являются специальными и обозначаются именем класса «партнер».Поиск элементов после изменения DOM
У меня есть флажок на странице, который при проверке будет включать и выключать все партнерские адреса через jQuery. Если какое-либо конкретное государство скрывает все свои местоположения, я хочу, чтобы тэг H4 этого состояния также был скрыт. Моя мысль заключалась в том, чтобы искать 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>
Вы можете включить 'html' , 'css',' js' в вопросе? – guest271314
Вот упрощенная версия. У Флориды нет партнерских мест, поэтому я хочу, чтобы заголовок «Флорида» исчез и вместе с его местоположениями, когда ящик не установлен. https://jsfiddle.net/krishunt/rn2vw1mq/1/ –