JQuery - Попытка отфильтровать divs на Keyup

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 фильтруются в соответствии с каждым тегом div h2. Я пытаюсь код ниже, но это не фильтрация. Он также не выдает никаких ошибок, поэтому я не уверен, что делать в этот момент ...

Вот 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

этот плагин jquery подходит вам, его файл несколько делений по названию или другие элементы по имени класса

http://labs.easyblog.it/jquery-filterbox/

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

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

Похоже, вы используете функцию .each () для фактических тегов H2 и добавляете / удаляете скрытый класс из них. Я думаю, вы хотите добавить / удалить скрытый класс из самого 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);
    });
});