使用jquery

Question

我有一个嵌套的＆＃39; ul＆＃39; ＆＃39;利＆＃39;树。在一个例子中，我只展示了某些＆＃39; li＆＃39;基于特定名称而隐藏其他名称。是的，我有一棵这样的树：

• 的 BRANCH1
  • 的 twig1
    • leaf1
  • 的 twig2
• 的店2
  • 的 twig3

我需要的是当我过滤branch1时它应该显示twig1，twig2和leaf1以及（）。现在它只显示父分支1。我怎样才能显示子节点？我通过文本框将文本过滤为输入。请帮助我......提前致谢。

＆＃13;

＆＃13;

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

    var filter = jQuery(this).val();
    jQuery("ul li").each(function() {
      if (jQuery(this).text().search(new RegExp(filter, "i")) < 0) {
        jQuery(this).hide();
      } else {
        jQuery(this).show();
        jQuery(this).children().show();
      }
    });
  });

  function func() {
    alert("Onclick function...");
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="text" />

<ul id="mytree">
  <li>
    Branch1
    <ul>
      <li>twig1
        <ul>
          <li>leaf1</li>
        </ul>
      </li>
      <li>
        twig2
      </li>
    </ul>
  </li>
  <li>
    Branch2
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

试试这个

＆＃13;

＆＃13;

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

        var filter = jQuery(this).val();
        jQuery("#mytree>li").each(function() {
          if (jQuery(this).text().search(new RegExp(filter, "i")) < 0) {
              jQuery(this).hide();
          } else {
            jQuery(this).show();
            jQuery(this).find('li').show();
          }
        });
      });

      function func() {
        alert("Onclick function...");
      }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="text" />

<ul id="mytree">

  <li>
    Branch1
    <ul>
      <li>twig1
        <ul>
          <li>leaf1</li>
        </ul>
      </li>
      <li>
        twig2
      </li>
    </ul>
  </li>
  <li>
    Branch2
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

.text（）函数返回元素的文本，包括子项。因此，您不需要循环每个 li 项目。只有＆＃34; root＆＃34;物品就足够了。

Answer 2

使用>仅引用#mytree元素的直接子元素：

$(document).ready(function () {

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

    var filter = jQuery(this).val();
    $("#mytree > li").each(function () {
      if (jQuery(this).text().search(new RegExp(filter, "i")) < 0) {
        jQuery(this).hide();
      } else {
        jQuery(this).show();
        jQuery(this).children().show();
      }
    });
  });

  function func() {
    alert("Onclick function...");
  }

});

Answer 3

您只需在搜索文本匹配时引用外部的直接子项。为此你必须替换

jQuery("ul li").each(function() {

与

jQuery("#mytree > li").each(function() {

它将开始工作： 我在JsFiddle

创建了一个小提琴