Question

所以我有一套动态创建的内容＆＃34;框，＆＃34;由wordpress插件生成。每个框都包含在一个div中，其中包含＆＃34; front-page-post＆＃34;。我试图创建一个＆＃34;实时搜索＆＃34;这将删除不匹配的框，但也会在用户更改或删除其搜索字词时将其添加回来。

使用$（this）.fadeOut（）;和$（this）.fadeIn（）;但是因为这些框实际上没有被移除 - 只是隐藏 - 页面布局没有动态更新，并且框保持原来的位置。如果我使用$（this）.remove（）完全删除框，我可以更新页面布局。但如果搜索字词更新，则无法弄清楚如何重新添加它们。尝试将它们存储在页面上隐藏的div中，并使用类＆＃34;存储＆＃34;但这也不起作用。

我正在处理的页面是here。这是我的代码;任何帮助，将不胜感激！谢谢！

<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>

Answer 1

看起来该网站使用position：absolute和top，left来定位块，这意味着即使您删除了这些框，也必须重新计算这些块。

Answer 2

我花了一段时间才弄明白，但这似乎在我的浏览器上运行良好。

第一行只是禁用你的功能所以我可以在控制台中尝试它，你不需要它。

working pastebin sample

jQuery删除然后再次添加进行实时搜索

2 个答案: