更改DOM后查找元素

时间：2016-03-19 02:28:07

标签： jquery html dom

我有一份按美国州分组的地址列表。状态名称是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&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>

2 个答案:

答案 0 :(得分：1)

您可以使用.filter()，.get()，.every()，.promise()，.prev()来过滤每个ul的{​​{1}}元素当所有li元素都已完成动画时，后代元素的style display等于"none";在已过滤的.partner元素的前一个元素同级.fadeOut()上调用h4 

ul
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: ' *';
}

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);
            }
        });
    }
});
相关问题
最新问题