如果所有李都被隐藏，则显示消息

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>

小提琴：http://jsfiddle.net/13y6b7jj/1/（只是想了解实际发生了什么）

Answer 1

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

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

小提琴

Answer 2

您可以使用.is()和:visible。

如果.is中传递的选择器与堆栈中的至少1个元素匹配，则它将返回true。您只需要反转返回的值：

function filter(element) {
    var value = $(element).val();
    var $li = $(".dropd > li").each(function () {
        if ($(this).text().indexOf(value) > -1) {
            $(this).show();
        } else {
            $(this).hide();
        }
        // Alternative code here :
        // $(this).toggle($(this).text().indexOf(value) > -1);
    });
    if (! $li.is(':visible')) {
        alert(showMessage + '111');
        $('.dropd').find('#not_matches').hide();
    }
}

Fiddle

Answer 3

现在我看到了问题。你可以做一些类似的事情：

if ($(".dropd > li:visible").length === 0) 

此处演示

Answer 4

您应该使用这个：

function filter(element) {
            var value = $(element).val();
            var count = 0;
            $(".dropd > li").each(function () {
                if ($(this).text().indexOf(value) > -1) {
                    $(this).show();
                    count++;
                } else {
                    $(this).hide();
                }
            });
            if (count != 0) 
            {
                $('.dropd').find('#not_matches').hide();
            }
            else{
                $('.dropd').find('#not_matches').show();
            }
        }

JSFiddle

Answer 5

您只需要修改您的代码。您将消息隐藏在需要显示的位置，反之亦然

if (showMessage) {
       $('.dropd').find('#not_matches').show();
   } else {
            $('.dropd').find('#not_matches').hide();
          }