1. ホーム
  2. 質問と答え
  3. DOMを変更した後の要素の検索

DOMを変更した後の要素の検索

2016-03-19 15 views
-2

米国の州によってグループ化された住所のリストがあります。状態名はH4タグであり、アドレスは状態ごとに1つの順序付けられていないリスト内のliタグである。アドレスの中には特別なものがあり、クラス名 "partner"で指定されています。DOMを変更した後の要素の検索

このチェックボックスをオンにすると、jQueryを使用してすべてのパートナーロケーションをオン/オフに切り替えるチェックボックスが表示されます。特定の状態がすべての場所を隠している場合は、その状態のH4タグも非表示にします。 DOMを変更したので、jQueryに検索させる方法がわかりません。たぶん私はこれについてすべて間違っているつもりです。

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>

出典

2016-03-19 Kris Hunt

+2

あなたは 'html'を含むことができ、 、 'css'、' js'の質問？ – guest271314

+0

ここに簡略化したバージョンがあります。フロリダにはパートナーの場所がないので、ボックスがチェックされていないときは、ヘッダー「フロリダ」がその場所とともに消えてしまいます。 https://jsfiddle.net/krishunt/rn2vw1mq/1/ –

答えて

1

兄弟前の要素に.fadeOut()を呼び出す：

$('#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); 
      } 
     }); 
    } 
});

出典

2016-03-19 04:31:58

+0

ありがとう！あなたのコードにはいくつかのタイプミス（余分な括弧と不足している$）がありましたが、一旦それらを整理すると、それは美しく機能しました。 –

+0

オススメして申し訳ありません。私は答えにそれらを修正しました。 –

1

をあなたはすべてli子孫要素が"none"とき全て.partnerに等しいstyledisplayを有するul要素をフィルタリングする.filter()、.get()、.every()、.promise()、.prev()を使用することができ要素は完成したアニメーション。以下に、あなたのJavaScriptを変更してみてくださいフィルターul要素のh4

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>

jsfiddle https://jsfiddle.net/rn2vw1mq/2/

出典

2016-03-19 03:34:06 guest271314

+0

ありがとうございます！私はあなたの時間を感謝します！ –

関連する問題

 関連する問題