だから私はワードプレスプラグインによって生成された動的に作成されたコンテンツ「ボックス」のセットを持っています。各ボックスは、「front-page-post」クラスの div に含まれています。一致しないボックスを削除する「ライブ検索」を作成しようとしていますが、ユーザーが検索語を変更または消去したときにそれらを元に戻すこともできます。
$(this).fadeOut(); の使用 および $(this).fadeIn(); 動作しますが、ボックスが実際には削除されていないため (非表示になっているだけです)、ページ レイアウトは動的に更新されず、ボックスは元の場所にとどまります。$(this).remove(); を使用してボックスを完全に削除すると、ページ レイアウトを更新できます。しかし、検索用語が更新された場合にそれらを再度追加する方法がわかりません。クラス「ストア」を使用して、ページの非表示の div 内にそれらを保存しようとしていますが、これも機能していません。
私が取り組んでいるページはこちらです。これが私のコードです。どんな助けでも大歓迎です！ありがとう！
<script type="text/javascript">
$(document).ready(function(){
$("#filter").keyup(function(){
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(), count = 0;
// Loop through the comment list
$(".front-page-post").each(function(){
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).clone().appendTo("div.store");
$(this).remove().delay(500); $(window).resize();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).prepend( function() { $("div.store").contents(); } );
count++;
}
});
// Update the count
var numberItems = count;
$("#filter-count").text("Number of Resources = "+count);
});
});
</script>