jQuery-根據文本框輸入過濾嵌套列表

Question

我有一個嵌套的復選框列表，需要根據與標簽值相比的文本框輸入將其過濾掉。 列表看起來像這樣，但要大得多：

小提琴： https : //jsfiddle.net/y9qqgjp5/

但是，我對此的嵌套部分有麻煩。 就像我現在擁有的那樣，如果您要搜索用戶（第二級項目），則父級會因為不匹配而被隱藏，從而使子級也被隱藏。 過濾父對象時效果很好。

這是我正在篩選的簡化結構。

HTML：

<input type="text" id="filter" />
<span class="checkbox-list">
<ul>
    <li>
        <label>Item1</label>
        <ul>
            <li>
                <label>Item2</label>
            </li>
            <li>
                <label>Item3</label>
            </li>
            <li>
                <label>Item4</label>
            </li>
            <li>
                <label>Item5</label>
            </li>
        </ul>
    </li>
    <li>
        <label>Item6</label>
    </li>
    <li>
        <label>Item7</label>
        <ul>
            <li>
                <label>Item4</label>
            </li>
            <li>
                <label>Item8</label>
            </li>
        </ul>
    </li>
</ul>
</span>

JQuery的：

$('#filter').keyup(function() {
  var valThis = $(this).val().toLowerCase();
  if (valThis == "") {
    $('.checkbox-list > ul > li > label').parent().show();
  } else {
    $('.checkbox-list > ul > li > label').each(function() {
      var text = $(this).text().toLowerCase();
      (text.indexOf(valThis) >= 0) ? $(this).parent().show(): $(this).parent().hide();
    });
  };

  if (valThis == "") {
    $('.checkbox-list > ul > li > ul > li > label').parent().show();
  } else {
    $('.checkbox-list > ul > li > > ul > li > label').each(function() {
      var text = $(this).text().toLowerCase();
      (text.indexOf(valThis) >= 0) ? $(this).parent().show(): $(this).parent().hide();
    });
  };
});

任何幫助表示贊賞。 我不能把這個嵌套部分包裹住。

Answer 1

嘗試使用parents()

 var labels = $('label'); // cache this for better performance $('#filter').keyup(function() { var valThis = $(this).val().toLowerCase(); if (valThis == "") { labels.parent().show(); // show all lis } else { labels.each(function() { var label = $(this); // cache this var text = label.text().toLowerCase(); if (text.indexOf(valThis) > -1) { label.parents('li').show() // show all li parents up the ancestor tree } else { label.parent().hide(); // hide current li as it doesn't match } }); }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="filter" /> <span class="checkbox-list"> <ul> <li> <label>Item 1</label> <ul> <li> <label>Item 12</label> </li> <li> <label>Item3</label> </li> <li> <label>Item4</label> </li> <li> <label>Item5</label> </li> </ul> </li> <li> <label>Item6</label> </li> <li> <label>Item7</label> <ul> <li> <label>Item4</label> </li> <li> <label>Item8</label> </li> </ul> </li> </ul> </span>