顯示所有孩子 <ui> 和 <li> 在一個 <li> 使用jQuery標簽

Question

我有一棵嵌套的“ ul”“ li”樹。 在一個實例中，我僅顯示基於特定名稱的某些“ li”，而其他則被隱藏。 說，我有一棵這樣的樹：

• 分支1
  • 樹枝1
    • 葉1
  • 樹枝2
• 分行2
  • 樹枝3

我需要的是，當我過濾branch1時，它還應該顯示twig1，twig2和leaf1。 現在，它僅顯示父branch1。 我如何也可以顯示子節點？ 我給文本過濾通過一個文本框作為輸入。 請幫助我...預先感謝。

 $(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項目。 僅“根”項目就足夠了。

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

在搜索文本匹配時，您只需要引用external的直接子代即可。 為此，您必須更換

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

同

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

然后它將開始工作：我在以下位置創建了一個提琴： JsFiddle