jQuery - 尝试在 keyup 上过滤 div

Question

修改后的代码

jQuery(function($) {
$("#filter").keyup(function () {
    var filter = $(this).val(), count = 0;
    $(".filtered h2").each(function () {
    if ($(this).text().search(new RegExp(filter, "i")) != -1) {
            $(this).parent().addClass("hidden");
    } else {
            $(this).parent().removeClass("hidden");
            count++;
    }
    $("#filter-count").text(count);
    });
});

});

我列出了许多 div，我希望能够添加一个允许用户开始输入的输入字段，并根据每个 div h2 标签过滤 div。我正在尝试下面的代码，但它没有过滤。它也没有抛出任何错误，所以我现在不知道该怎么做......

这是 html 标记：

    <input id="filter" name="filter" size="40"/>

    <div class="filtered">

        <div class="archive-row clearfix">
             <label>Creator: </label><h2 class="hidden">Alchemy</h2>
                <label>Title: </label> <p>Cras velit eros, eleifend ut viverra </p>
                <label>Summary: </label><p>Etiam lobortis, risus a dignissim tempor, neque sapien lobortis mi, quis semper sapien nisi dictum nisi. Integer neque neque</p>
        </div>

     <div class="archive-row clearfix">
         <label>Creator: </label><h2 class="hidden">Mathematics</h2>
            <label>Title: </label> <p>Cras velit eros, eleifend ut viverra </p>
            <label>Summary: </label><p>Etiam lobortis, risus a dignissim tempor, neque sapien lobortis mi, quis semper sapien nisi dictum nisi. Integer neque neque</p>
        </div>

     <div class="archive-row clearfix">
         <label>Creator: </label><h2 class="hidden">English</h2>
            <label>Title: </label> <p>Cras velit eros, eleifend ut viverra </p>
            <label>Summary: </label><p>Etiam lobortis, risus a dignissim tempor, neque sapien lobortis mi, quis semper sapien nisi dictum nisi. Integer neque neque</p>
        </div>

    </div>

这里是 jquery...

$(document).ready(function() {

$("#filter").keyup(function () {
    var filter = $(this).val(), count = 0;
    $(".filtered h2").each(function () {
 if ($(this).text().search(new RegExp(filter, "i")) < 0) {
            $(this).addClass("hidden");
 } else {
            $(this).removeClass("hidden");
            count++;
 }
    });
    $("#filter-count").text(count);
});

});

Answer 1

    <input id="filter" name="filter" size="40"/>

    <div class="filtered">

        <div class="archive-row clearfix">
             <label>Creator: </label><h2 >Alchemy</h2>
                <label>Title: </label> <p>Cras velit eros, eleifend ut viverra </p>

                <label>Summary: </label><p>Etiam lobortis, risus a dignissim tempor, neque sapien lobortis mi, quis semper sapien nisi dictum nisi. Integer neque neque</p>
        </div>

     <div class="archive-row clearfix">
         <label>Creator: </label><h2 >Mathematics</h2>
            <label>Title: </label> <p>Cras velit eros, eleifend ut viverra </p>

            <label>Summary: </label><p>Etiam lobortis, risus a dignissim tempor, neque sapien lobortis mi, quis semper sapien nisi dictum nisi. Integer neque neque</p>
        </div>

     <div class="archive-row clearfix">
         <label>Creator: </label><h2>English</h2>
            <label>Title: </label> <p>Cras velit eros, eleifend ut viverra </p>

            <label>Summary: </label><p>Etiam lobortis, risus a dignissim tempor, neque sapien lobortis mi, quis semper sapien nisi dictum nisi. Integer neque neque</p>
        </div>

    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script>
$(document).ready(function() {

    $("#filter").keyup(function () {
    var filter = $(this).val(), 
        count = 0;

    $(".filtered h2").each(function () {
        var parent = $(this).parent(), length = $(this).text().length>0;

        if ( length && $(this).text().search(new RegExp(filter, "i")) < 0) {
        parent.hide();
         } else {
        parent.show();
        count++;
         }
    });
    $("#filter-count").text(count);
    });

});

</script>
<div id="filter-count"></div>

Answer 2

您似乎在实际的 H2 标签上使用 .each() 函数，并从中添加/删除隐藏类。我的猜测是，您想从 div 本身而不是 H2 添加/删除隐藏类？

$(document).ready(function() {
    $("#filter").keyup(function () {
        var filter = $(this).val(), count = 0;
        $(".filtered h2").each(function () {
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).parent().addClass("hidden");
            } else {
                $(this).parent().removeClass("hidden");
                count++;
            }
        });
        $("#filter-count").text(count);
    });
});

Answer 3

我可能错了，但我认为您想隐藏父 div，因此调用父级应该可以解决此问题。

$(document).ready(function() {

    $("#filter").keyup(function () {
        var filter = $(this).val(), 
            count = 0;
        $(".filtered h2").each(function () {
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).parent().addClass("hidden");
            } else {
                $(this).parent().removeClass("hidden");
                count++;
            }
        });
        $("#filter-count").text(count);
    });
});

Answer 4

这个 jquery 插件适合你，它的文件管理器是一些按标题的 div 或按类名的其他元素

https://opengeo.tech/jquery-filterbox/

$('#findbox1').filterbox({
    container: '.boxlist',
    child: '.box',
    childKey: '.title'
});