مسج - محاولة تصفية 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);
    });
});

});

لدي عدد من divs المسردة و أريد أن تكون قادرا على إضافة حقل إدخال من شأنها أن تسمح للمستخدم البدء في الكتابة و divs يتم تصفيتها وفقا لكل divs 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>

هنا مسج...

$(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 العلامات إضافة/إزالة الخفية فئة من أولئك كذلك.تخميني هو أنك تريد أن تكون إضافة/إزالة خفية فئة من شعبة نفسها وليس 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

قد أكون مخطئا ولكن أعتقد أن كنت تريد إخفاء شعبة الأم حتى دعوة الوالدين أن حل هذه القضية.

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

هذا البرنامج المساعد مسج حق لك ، المدون بعض divs حسب العنوان أو عناصر أخرى من قبل اسم الفئة

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

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