javascript - 如果所有 Li 都被隐藏，则显示消息

Question

我想要的是，如果在 keyup() 上，如果所有 li 都被隐藏，则显示一个特定的 div。我以下是我的 Jquery 代码。目前发生的情况是，当 div 第一次满足其成功场景时就会显示，我的 fiddle 将更多地解释该场景。

 var showMessage = false;
    function filter(element) {
        var value = $(element).val();
        $(".dropd > li").each(function () {
            if ($(this).text().indexOf(value) > -1) {
                $(this).show();
            } else {
                showMessage = true;
                $(this).hide();
            }
        });
        if (showMessage == true) {
            alert(showMessage + '111');
            $('.dropd').find('#not_matches').hide();
        }
    }
 $('#txt_colors').keyup(function () {
        filter(this);
    });

以下是我的 HTML

<div id="dd2" class="wrapper-dropdown-2" tabindex="1">
   <div class="selected" style="margin-right:30px;"> select Color</div>
      <ul class="dropd"> <input id="txt_colors" type="text"/>
         <div id="not_matches" name="not_matches" style="display: none;">&nbsp;&nbsp;&nbsp;No Matching Color </div>
           <li onclick="search_ral_pantone('000000')" value="000000" style="border-right-color:#000000"><a>Black</a></li>
            <li onclick="search_ral_pantone('0000FF')" value="0000FF" style="border-right-color:#0000FF"><a>Blue</a></li>
            <li onclick="search_ral_pantone('808080')" value="000000" style="border-right-color:#808080"><a>Gray</a></li>
            <li onclick="search_ral_pantone('00FF00')" value="00FF00" style="border-right-color:#00FF00"><a>Green</a></li>
            <li onclick="search_ral_pantone('800000')" value="800000" style="border-right-color:#800000"><a>Maroon</a></li>
            <li onclick="search_ral_pantone('800080')" value="800080" style="border-right-color:#800080"><a>Purple</a></li>
            <li onclick="search_ral_pantone('FF0000')" value="FF0000" style="border-right-color:#FF0000"><a>Red</a></li>
            <li onclick="search_ral_pantone('C0C0C0')" value="C0C0C0" style="border-right-color:#C0C0C0"><a>Silver</a></li>
            <li onclick="search_ral_pantone('FFFFFF')" value="FFFFFF" style="border-right-color:#FFFFFF"><a>White</a></li>
            <li onclick="search_ral_pantone('FFFF00')" value="FFFF00" style="border-right-color:#FFFF00"><a>Yellow</a></li>
      </ul>
     </div>

fiddle : http://jsfiddle.net/13y6b7jj/1/ (只是为了了解实际发生的情况)

Answer 1

您可以通过以下代码检查是否有任何 li 可见:

$(".dropd li:visible").length

fiddle