问题描述:

I have a list of addresses that are grouped by US State. The state names are H4 tags and the addresses are li tags in one unordered list per state. Some of the addresses are special, and are designated with the class name "partner".

I have a checkbox on the page that, when checked, will toggle all the partner locations off and on via jQuery. If a particular state has all its locations hidden, I want that state's H4 tag to be hidden as well. My thought was to search the DOM for all the parent containers with no li children, and then hide them, but I don't know how to get jQuery to find them, now that the DOM has been changed. Maybe I'm going about this all wrong.

javascript tried:

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&nbsp;&nbsp;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&nbsp;&nbsp;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&nbsp;&nbsp;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&nbsp;&nbsp;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&nbsp;&nbsp;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&nbsp;&nbsp;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&nbsp;&nbsp;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&nbsp;&nbsp;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&nbsp;&nbsp;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&nbsp;&nbsp;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&nbsp;&nbsp;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&nbsp;&nbsp;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&nbsp;&nbsp;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>

网友答案:

Try changing your JavaScript to the following:

$('#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);
            }
        });
    }
});
网友答案:

You can use .filter() , .get() , .every(), .promise() , .prev() to filter ul elements where every li descendant element has style display equal to "none" when all .partner elements have completed animations; call .fadeOut() on previous element sibling h4 of filtered ul element

var 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: ' *';
}
<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&nbsp;&nbsp;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&nbsp;&nbsp;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&nbsp;&nbsp;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&nbsp;&nbsp;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&nbsp;&nbsp;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&nbsp;&nbsp;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&nbsp;&nbsp;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&nbsp;&nbsp;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&nbsp;&nbsp;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&nbsp;&nbsp;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&nbsp;&nbsp;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&nbsp;&nbsp;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&nbsp;&nbsp;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>
相关阅读:
Top