jQuery.append 不適用於 $(document).ready

Question

這是對不隨 onClick 改變的父 div 的切換類的后續操作

在我的 HTML 布局中，我發現我需要在記錄之后而不是之前生成 div #filters ，因為我需要使用 PHP 為每個 Z9ED39E2EA931586B6A985A6942EF573E 構建按鈕。 這給了我使用 jQuery .append將#filters 移動到記錄上方的#move-filters-here 的想法。 但是在我過濾 state 后，過濾器出現在記錄下方，並且.append無法將#filters 移動到記錄上方的#move-filters-here。

.append是否不能與（文檔）一起使用。准備好了嗎？

有沒有其他方法可以讓.append移動#filters？

.append是否需要在 Onclick function 之后再次“開火”？

小提琴： https://jsfiddle.net/j3semt6h/10/

 $(document).ready(function(){ $("#filters").append("#move-filters-here"); $('.state-button').on('click', function() { let _this = $(this); if (._this.hasClass('active')) { $('.state-button,active. .record.active');removeClass('active'). $('[data-state=' + _this.data('state') + ']');addClass('active'); } }); });

 .record { display: none; }.state-button { border: 2px solid #c2c2c2; padding: 5px; border-radius: 5px; margin: 0 10px 0 10px; }.state-button.active { border-color: red; }.record.active { display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="move-filters-here"></div> <div class="record" data-state="AK"> <h1 class="name">Customer 1</h1> <ul> <li class="focus">Focus: </li> <li class="course">Course: </li> <li class="business">Business: </li> <li class="address">Location: 345 Cow Town, Anchorage, <span class="state">AK</span></li> </ul> </div> <div class="record" data-state="AR"> <h1 class="name">Customer 2</h1> <ul> <li class="focus">Focus: </li> <li class="course">Course: </li> <li class="business">Business: </li> <li class="address">Location: Mobile, <span class="state">AR</span></li> </ul> </div> <div class="record" data-state="CA"> <h1 class="name">Customer 3</h1> <ul> <li class="focus">Focus: </li> <li class="course">Course: </li> <li class="business">Business: </li> <li class="address">Location: Los Angeles <span class="state">CA</span></li> </ul> </div> <div class="record" data-state="AZ"> <h1 class="name">Customer 3</h1> <ul> <li class="focus">Focus: </li> <li class="course">Course: </li> <li class="business">Business: </li> <li class="address">Location: Flagstaff <span class="state">AZ</span></li> </ul> </div> <div class="record" data-state="UT"> <h1 class="name">Customer 3</h1> <ul> <li class="focus">Focus: </li> <li class="course">Course: </li> <li class="business">Business: </li> <li class="address">Location: SLC <span class="state">UT</span></li> </ul> </div> <div id="filters"> <button class="state-button state-button-ak" data-state="AK">Alaska</button> <button class="state-button state-button-ar" data-state="AR">Arkansas</button> <button class="state-button state-button-ca" data-state="CA">California</button> <button class="state-button state-button-ca" data-state="AZ">Arizona</button> <button class="state-button state-button-ut" data-state="UT">Utah</button> </div>

Answer 1

我假設您將append與appendTo混淆了。 現在，您將文字文本"#move-filters-here"附加到#filters元素的內容中。 如果您改用$('#filters').appendTo('#move-filters-here') ，它會起作用。

 $(document).ready(function(){ $("#filters").appendTo("#move-filters-here"); $('.state-button').on('click', function() { let _this = $(this); if (._this.hasClass('active')) { $('.state-button,active. .record.active');removeClass('active'). $('[data-state=' + _this.data('state') + ']');addClass('active'); } }); });

 .record { display: none; }.state-button { border: 2px solid #c2c2c2; padding: 5px; border-radius: 5px; margin: 0 10px 0 10px; }.state-button.active { border-color: red; }.record.active { display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="move-filters-here"></div> <div class="record" data-state="AK"> <h1 class="name">Customer 1</h1> <ul> <li class="focus">Focus: </li> <li class="course">Course: </li> <li class="business">Business: </li> <li class="address">Location: 345 Cow Town, Anchorage, <span class="state">AK</span></li> </ul> </div> <div class="record" data-state="AR"> <h1 class="name">Customer 2</h1> <ul> <li class="focus">Focus: </li> <li class="course">Course: </li> <li class="business">Business: </li> <li class="address">Location: Mobile, <span class="state">AR</span></li> </ul> </div> <div class="record" data-state="CA"> <h1 class="name">Customer 3</h1> <ul> <li class="focus">Focus: </li> <li class="course">Course: </li> <li class="business">Business: </li> <li class="address">Location: Los Angeles <span class="state">CA</span></li> </ul> </div> <div class="record" data-state="AZ"> <h1 class="name">Customer 3</h1> <ul> <li class="focus">Focus: </li> <li class="course">Course: </li> <li class="business">Business: </li> <li class="address">Location: Flagstaff <span class="state">AZ</span></li> </ul> </div> <div class="record" data-state="UT"> <h1 class="name">Customer 3</h1> <ul> <li class="focus">Focus: </li> <li class="course">Course: </li> <li class="business">Business: </li> <li class="address">Location: SLC <span class="state">UT</span></li> </ul> </div> <div id="filters"> <button class="state-button state-button-ak" data-state="AK">Alaska</button> <button class="state-button state-button-ar" data-state="AR">Arkansas</button> <button class="state-button state-button-ca" data-state="CA">California</button> <button class="state-button state-button-ca" data-state="AZ">Arizona</button> <button class="state-button state-button-ut" data-state="UT">Utah</button> </div>

_{（或者，如果您出於某種原因特別想使用append ，則需要以相反的方式進行操作，並且實際上還將要附加的內容引用為元素： $('#move-filters-here').append($('#filters')) .)}

Answer 2

如果你想要 append #filter to #move-filters-here"你可以這樣做：

$("#move-filters-here").append($("#filters"));

如果你反之亦然，你可以像這樣實現你的目標：

$("#filters").append("#move-filters-here");