jQuery.search显示列表项的初始div-property'；T

我需要搜索四个表并在四个div中显示结果。从根本上说，这是可行的。但是，我首先需要div为空。我循环浏览LI元素，并根据搜索结果隐藏或显示。唯一有效的方法是在开始时使用style=“display:none”显示一个空DIV。我尝试使用$（“.messagelistdiv”）.hide（）；但是.show方法不起作用

如果搜索筛选器为空，我不想显示任何内容。键入时，需要显示符合条件的项目

<script type="text/javascript" language="JavaScript">

    jQuery( document ).ready(function($) {

     $(".messagelistdiv div").hide();
     $(".articlelistdiv div").hide();
     $(".Videolistdiv div").hide();
     $(".Surveylistdiv div").hide();

    $('#filter').keyup(function(){

        // Retrieve the input field text and reset the count to zero
        var filter = $(this).val(), messagecount = 0, articlecount = 0, videocount = 0, surveycount = 0;
        if($.trim(filter)==''){ // hide is no text
            //$(".messagelistdiv div").hide();
            //$(".articlelistdiv div").hide();
            //$(".Videolistdiv div").hide();
            //$(".Surveylistdiv div").hide();
            return;
        }

        else {

        var regex = new RegExp(filter, "i"); // Create a regex variable outside the loop statement

     // Loop through the messages list
        $(".messagelist li").each(function(){

            // If the list item does not contain the text phrase fade it out
            if ($(this).text().search(regex) < 0 || $.trim(filter)=='') { // use the variable here
                $(this).hide();

            // Show the list item if the phrase matches and increase the count by 1
            } else {
                $(this).fadeIn(1000);
                messagecount++;
                $(".messagelistdiv div").fadeIn(1000);
            }
        });

        // Update the count
        var numberItems = messagecount;
        $("#messagefiltercount").html("Number of Messages = " + numberItems);

     // Loop through the articles list
        $(".articlelist li").each(function(){

            // If the list item does not contain the text phrase fade it out
            if ($(this).text().search(regex) < 0) { // use the variable here
                $(this).hide();

            // Show the list item if the phrase matches and increase the count by 1
            } else {
                $(this).fadeIn(1000);
                articlecount++;
                $(".articlelistdiv div").fadeIn(1000);
            }
        });

        // Update the count
        var numberItems = articlecount;
        $("#articlefiltercount").html("Number of Articles = " + numberItems);

    // Loop through the video list
        $(".Videolist li").each(function(){ 

            // If the list item does not contain the text phrase fade it out
            if ($(this).text().search(regex) < 0) { // use the variable here
                $(this).hide();

            // Show the list item if the phrase matches and increase the count by 1
            } else {
                $(this).fadeIn(1000);
                videocount++;
                $(".articlelistdiv div").fadeIn(1000);
            }
        });

        // Update the count
        var numberItems = videocount;
        $("#Videosfiltercount").html("Number of Videos = " + numberItems);

     // Loop through the survey list
        $(".SurveyReportslist li").each(function(){

            // If the list item does not contain the text phrase fade it out
            if ($(this).text().search(regex) < 0) { // use the variable here
                $(this).hide();

            // Show the list item if the phrase matches and increase the count by 1
            } else {
                $(this).fadeIn(1000);
                surveycount++;
                $(".Surveylistdiv div").fadeIn(1000);
            }
        });

        // Update the count
        var numberItems = surveycount;
        $("#SurveyReportsfiltercount").html("Number of Surveys/Reports = " + numberItems);
        }
    });
    });
</script> 
<form id="live-search" action="" class="styled" method="post">
    <fieldset>
        <input type="text" class="text-input" id="filter" value="" />
    </fieldset>
    <cfinvoke component="services.search" method="getMessages" Search_Phrase="" returnvariable="QMessages" />
    <div class="row">
        <div class="span4">
            <div id="messagefiltercount">
            </div>
            <div class="messagelistdiv" >
                <ol class="messagelist list-group">
                    <cfoutput query="QMessages">
                        <li class="list-group-item">
                            <a href="/site-search/site-search-results?id=#QMessages.id#">
                                #QMessages.subject# 
                            </a>
                        </li>
                    </cfoutput>
                </ol>
            </div>
        </div>
        <cfinvoke component="services.search" method="getArticles" Search_Phrase="" returnvariable="QArtilces" />
        <div class="span4">
            <div id="articlefiltercount">
            </div>
            <div class="articlelistdiv" >
                <ol class="articlelist list-group">
                    <cfoutput query="QArtilces">
                        <liclass="list-group-item">
                            <a href="/site-search/site-search-results?id=#QArtilces.id#">
                                #QArtilces.subject# 
                            </a>
                        </li>
                    </cfoutput>
                </ol>
            </div>
        </div>
    </div>
    <cfinvoke component="services.search" method="getVideos" Search_Phrase="" returnvariable="QVideos" />
    <div class="row">
        <div class="span4">
            <div id="Videosfiltercount">
            </div>
            <div class="Videolistdiv" >
                <ol class="Videolist list-group">
                    <cfoutput query="QVideos">
                        <liclass="list-group-item">
                            <a href="/site-search/site-search-results?id=#QVideos.id#">
                                #QVideos.subject# 
                            </a>
                        </li>
                    </cfoutput>
                </ol>
            </div>
        </div>
        <cfinvoke component="services.search" method="getSurveyReports" Search_Phrase="" returnvariable="QSurveyReports" />
        <div class="span4">
            <div id="SurveyReportsfiltercount">
            </div>
            <div class="Surveylistdiv" >
                <ol class="SurveyReportslist list-group">
                    <cfoutput query="QSurveyReports">
                        <liclass="list-group-item">
                            <a href="/site-search/site-search-results?id=#QSurveyReports.id#">
                                #QSurveyReports.subject# 
                            </a>
                        </li>
                    </cfoutput>
                </ol>
            </div>
        </div>
    </div>
</form>

jQuery（文档）.ready（函数（$）{
$（“.messagelistdiv”）.hide（）；
$（“.articlelistdiv”）.hide（）；
$（“.Videolistdiv”）.hide（）；
$（.Surveylistdiv”）.hide（）；
$（“#过滤器”）.keyup（函数（）{
//检索输入字段文本并将计数重置为零
var filter=$（this）.val（），messagecount=0，articlecount=0，videocount=0，surveycount=0；
如果（$.trim（filter）=''）{//hide没有文本
//$（“.messagelistdiv”）.hide（）；
//$（“.articlelistdiv”）.hide（）；
//$（“.Videolistdiv”）.hide（）；
//$（.Surveylistdiv”）.hide（）；
返回；
}
否则{
var regex=new RegExp（filter，“i”）；//在循环语句外创建一个regex变量
//循环浏览消息列表
$（“.messagelist li”）.each（函数（）{
//如果列表项不包含文本短语，请将其淡出
if（$（this）.text（）.search（regex）<0 | |$.trim（filter）=''{//在此处使用变量
$（this.hide（）；
//如果短语匹配，则显示列表项并将计数增加1
}否则{
美元（本）.fadeIn（1000）；
messagecount++；
美元（“.messagelistdiv”）.fadeIn（1000）；
}
});
//更新计数
var numberItems=messagecount；
$（“#messagefiltercount”）.html（“消息数=“+numberItems”）；
//循环浏览文章列表
$（“.articlelist li”）。每个（函数（）{
//如果列表项不包含文本短语，请将其淡出
如果（$（this）.text（）.search（regex）<0）{//请在此处使用变量
$（this.hide（）；
//如果短语匹配，则显示列表项并将计数增加1
}否则{
美元（本）.fadeIn（1000）；
articlecount++；
美元（“.articlelistdiv”）.fadeIn（1000）；
}
});
//更新计数
var numberItems=articlecount；
$（“#articlefiltercount”）.html（“文章数量=”+numberItems）；
//循环浏览视频列表
$（“.Videolist li”）.each（function（）{
//如果列表项不包含文本短语，请将其淡出
如果（$（this）.text（）.search（regex）<0）{//请在此处使用变量
$（this.hide（）；
//如果短语匹配，则显示列表项并将计数增加1
}否则{
美元（本）.fadeIn（1000）；
videocount++；
美元（“.articlelistdiv”）.fadeIn（1000）；
}
});
//更新计数
var numberItems=视频计数；
$（“#Videosfiltercount”）.html（“视频数量=”+numberItems）；
//循环浏览调查列表
$（“.SurveyReportslist li”）。每个（函数（）{
//如果列表项不包含文本短语，请将其淡出
如果（$（this）.text（）.search（regex）<0）{//请在此处使用变量
$（this.hide（）；
//如果短语匹配，则显示列表项并将计数增加1
}否则{
美元（本）.fadeIn（1000）；
surveycount++；
$（“.Surveylistdiv”）.fadeIn（1000）；
}
});
//更新计数
var numberItems=调查计数；
$（“#调查报告过滤计数”）.html（“调查/报告数量=“+numberItems”）；
}
});
});





像
.messagelistdiv
这样的元素没有
div
死者，这就是它不起作用的原因，您可以隐藏/显示
messagelistdiv
元素

$(".messagelistdiv").hide();

及

您正在使用的
$（“.messagelistdivdiv”）.hide（）中没有
div
元素哪个是错误的selector@user990016
messagelistdiv
中没有
div
元素。。。你能比较一下我的代码和你的Sok吗，我明白了。我误解了选择器中的第二个限定符。
$(".messagelistdiv").fadeIn(1000);