javascript - 使用 jquery 显示 标签内的所有子 和

Question

我有一个嵌套的“ul”“li”树。在一个实例中，我仅显示基于特定名称的某些“li”，而其他则被隐藏。说吧，我有一棵这样的树:

• 分支1
  • Twig 1
    • 叶子1
  • twig2
• 分支2
  • twig3

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

$(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...");
  }
});

<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>

Answer 1

尝试这样

      $('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...");
      }

<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>

.text() 函数返回包含子项的元素文本。所以你不需要循环每个 li 项目。只有“root”项目就足够了。