jQuery - Der Versuch, div-Tags auf keyup filtern

Question

Überarbeitete-Code

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);
    });
});

});

Ich habe eine Reihe von div-Tags, die aufgeführt sind, und ich möchte in der Lage sein ein Eingabefeld hinzuzufügen, dass ein Benutzer die Eingabe starten ermöglichen und die divs gefiltert werden nach jedem divs h2-Tag. Ich versuche, den Code unten, aber es ist nicht zu filtern. Es wird keine Fehler entweder zu werfen, so dass ich bin mir nicht sicher, was an dieser Stelle zu tun ...

Hier ist der HTML-Markup:

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

Hier ist die 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

Es scheint, dass Sie die .each () Funktion auf den tatsächlichen H2-Tags verwenden und das Hinzufügen / als auch die versteckte Klasse von denen entfernen. Meine Vermutung ist, Sie wollen die versteckte Klasse zu Hinzufügen / Entfernen aus dem div selbst und nicht dem 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

Ich kann mich irren, aber ich glaube, Sie das übergeordnete div ausblenden möchten so ein Aufruf an Eltern sollten dieses Problem lösen.

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

Diese jQuery-Plugin für Sie richtig ist, seine Filer einiger divs nach Titel oder anderen Elementen von Klassennamen

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

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