Question

我有一个嵌套的复选框列表，我需要根据文本框输入将其与标签的值进行比较。该列表看起来像这样但更大：

但是，我遇到了嵌套部分的问题。正如我现在所做的那样，如果你去搜索用户（第二级项目），父母就会被隐藏，因为它不匹配，因此也会隐藏孩子。它可以很好地过滤父母。

这是我过滤的简化结构。

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>

JQuery - 根据文本框输入过滤嵌套列表

1 个答案: