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

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