Question

我正在尝试动态显示和隐藏div标签的内容，具体取决于每个标签内部的<ul>是否隐藏了所有元素。我可以根据搜索成功隐藏和显示单个<li>元素，并在<ul＆gt;隐藏整个div。隐藏所有元素。但是，如果缩短搜索文本，我似乎无法取消隐藏<div>。

这是我的html：

<input type="text" id="search" />
<input type="text" name="textbox3" id="textbox3" readonly="true" />
<div class="azdiv" id="A">

<h2 id="a">A</h2>

    <ul class="azlist">
        <li><a href="#/australia/">Australia</a>
        </li>
        <li><a href="#/austria/">Austria</a>
        </li>
    </ul>
</div>
<div class="azdiv" id="B">

<h2 id="b">B</h2>

    <ul class="azlist">
        <li><a href="#/belgium/">Belgium</a>
        </li>
        <li><a href="#/brazil/">Brazil</a>
        </li>
    </ul>
</div>

这是我的javascript（使用jquery）

$(function () {

jQuery.expr[':'].Contains = function (a, i, m) {
        return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
    };

    $('input[type="text"]').keyup(function () {

        var filter = $(this).val();

        $("ul.azlist").find("a:not(:Contains(" + filter + "))").parent().hide();

        $("ul.azlist").find("a:Contains(" + filter + ")").parent().show();

        $("div.azdiv").find("ul:not(:has(li:visible))").parent().hide();

        $("div.azdiv").find("ul:has(li:visible)").parent().show();
        var textbox3 = document.getElementById('textbox3');
        textbox3.value = $('ul.azlist').children(':visible').length;
    });
});

Here's a JSFiddle

Answer 1

只需翻转这两行：

$("ul.azlist").find("a:Contains(" + filter + ")").parent().show();
$("div.azdiv").find("ul:not(:has(li:visible))").parent().hide();

它应该工作。您正在显示然后隐藏您想要显示的元素。

Answer 2

我最终解决了这个问题，首先检查在给定搜索字符串的每个div中应该看到多少结果，然后隐藏/取消隐藏div，然后隐藏内容。

$(function () {

jQuery.expr[':'].Contains = function (a, i, m) {
    return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};

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

    var filter = $(this).val();

    $("div.azdiv").each(function () {

      if (filter.length == 0) {
        $(this).show();
        $(this).find("ul.azlist li").show();
      } else {
            if ($(this).find("ul.azlist a:Contains(" + filter + ")").length > 0) {
              $(this).show();
              $(this).find("ul.azlist a:Contains(" + filter + ")").parent().show();
              $(this).find("ul.azlist a:not(:Contains(" + filter + "))").parent().hide();
            } else {
              $(this).hide();
            }
          }
        });
    });
});

隐藏div标签后无法取消隐藏div标签

2 个答案: