Question

我希望在我的功能完成后div显示没有子元素的消息。我在这里使用一个函数用于搜索选项，用于显示与搜索框文本匹配的div子元素。 1.如果没有与搜索框文本和div子元素匹配，我需要显示一条消息。我尝试了一些代码

$('#searchtool').click(function(){

   var valThis = $(this).val().toLowerCase();
    if(valThis == ""){
        $('.rightSidIcons> div').show();
    } else {
        $('.rightSidIcons> div').each(function(){
            var text = $(this).text().toLowerCase();

            (text.indexOf(valThis) >= 0) ? $(this).show() : $(this).hide();


         });

    }
     if($(".rightSidIcons").children().length == 0){
                $(".rightSidIcons").text("this item not found")
          }
      });



 <div class="searchBox  downbox"><input id="searchtool" name="" type="text" class="searchboxCss">
                </div>
<div class="rightSidIcons">
<div>manu</div>
<div>anu</div>
<div>sanu</div>
<div>janu</div>
<div>meenu</div>

<div>shinu</div>
<div>mansey</div>
<div>anusree</div>

</div>

Answer 1

使用$(".rightSidIcons > div:visible").length === 0代替$(".rightSidIcons").children().length === 0

:visible只会为您提供文档中可见的数据

您还需要使用keyup事件代替click事件。

FIDDLE HERE

Answer 2

您可以添加标记类＆＃39; active＆＃39;到所有需要显示的div并检查这个类的任何div＆＃39;

 $('#searchtool').on('keyup',function(){

   var valThis = $(this).val().toLowerCase();
    if(valThis == ""){
        $('.rightSidIcons > div').show();
    } else {
        $('.rightSidIcons > div').removeClass('active');
        $('.rightSidIcons> div').each(function(){
            var text = $(this).text().toLowerCase();
            if( (text.indexOf(valThis) >= 0))
            {
              $(this).addClass('active');
              $(this).show();
            }
            else
            {
              $(this).hide();
            }});    
    }
     if($(".rightSidIcons > div.active").length === 0){
              alert("dd")
          }
      });

Working example

Answer 3

以下是要搜索和显示消息的js代码：

somefile.csv

如果没有与文本框文本匹配的div子项，则显示一条消息

3 个答案: