javascript - 从嵌套的li中搜索

Closed. This question needs debugging details。它当前不接受答案。












                    想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。

                    4年前关闭。

<input id="search" type="text">

<ul>
  <li><a href="">One</a></li>
  <li><a href="">Two</a>
    <ul>
      <li><a href="">Three</a></li>
      <li><a href="">Four</a></li>
      <li><a href="">Five</a></li>
    </ul>
  </li>
  <li><a href="">Six</a></li>
</ul>

如果用户搜索术语“两个”，则“两个”中的所有子代都应该可见，并且如果用户搜索“三个”，则只有“三个”及其父代。 “两个”应该是可见的，这意味着在这种情况下将隐藏“四个”和“五个”。最后一种情况是在这里不起作用，也就是说，如果您搜索父项，则其子项暂时处于隐藏状态，但我希望它们显示出来。

Fiddle Link

最佳答案

siblings()函数对此非常有用，这是我即时制作的一个小提琴，需要进行一些编辑，但是它可以帮助您入门。 https://jsfiddle.net/vLod1kcr/

HTML：

<input id="search" type="text">

<ul class="menu">
  <li><a href="javascript:;">One</a>
    <ul>
      <li><a href="javascript:;">Three</a></li>
      <li><a href="javascript:;">Four</a></li>
      <li><a href="javascript:;">Five</a></li>
    </ul>
  </li>
  <li><a href="javascript:;">Two</a></li>
  <li><a href="javascript:;">Six</a></li>
</ul>

jQuery的：

$(document).ready(function(){
    $('#search').on('keyup', function() {
      var searchText = $(this).val().toLowerCase();
      $('li, ul').each(function(){
        $(this).show();
      });

      $('.menu a').each(function(){
        if ($(this).text().toLowerCase() == searchText) {
          $(this).parent().siblings().hide();
          $(this).parent().parent().parent().show().siblings().hide();
        }
      });
   });
});

关于javascript - 从嵌套的li中搜索，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35186908/

上一篇：javascript - 在表单提交时将 JavaScript 日期数组绑定(bind)到页面的 View 模型

下一篇：javascript - 我无法使用 jquery 获取几个 div 内的 select html 的值

javascript - D3 : adding style and class to DIV results in styles discarded

javascript - 如何覆盖 JavaScript 函数

javascript - AngularJS 指令内的双向绑定(bind)适用于 ng-click，但不适用于 window.onclick

Javascript promise 链 hell

javascript - 将 toLocaleString 应用于具有特定类的所有动态文本框

javascript - 动态创建的输入按钮被 Tab 键跳过...如何设置 tabindex

javascript - $(document).ready 和编写打开的 jQuery 语句之间的区别

javascript - DOM插入: Are some tag types faster when inserting into DOM?

javascript - 如何制作向下滚动时消失但向上滚动时显示的导航？