javascript - 如何排除jquery keyup 实时搜索期间的元素？

Question

我是 javascript/jquery 的新手，我想弄清楚如何在 ul id="#modulelist" 下排除/过滤掉 ul class="dropdown-menu"。我仍然希望能够搜索不在 ul class="dropdown-menu" 下的 li 元素。下面是我的 PHP 和 jquery 代码片段。

<ul class="to_do" id = "modulelist">
                       <?php
                       foreach($course_titles_not_completed as $course_title){
                           echo '<li class="dropdown">';
                           echo '<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-chevron-down"></i></a>';
                           echo '<ul class="dropdown-menu" role="menu">';

                        if(!empty($prereq_course_titles)){
                        foreach($prereq_course_titles as $prereq_course_title){
                            echo '<li><a href="#">';
                            echo $prereq_course_title;
                            echo '</a></li>';
                        }
                        }
                        else{
                            echo '<li><a href="#">';
                            echo 'No prerequisites';
                            echo '</a></li>';
                        }

                           echo '</ul>';
                           echo '<input type="checkbox" class="flat">';
                           echo $course_title;
                           echo '</li>';
                       }
                       ?>
                    </ul>

<script>
  $(document).ready(function(){
      $('.search').on('keyup',function(){
          var searchTerm = $(this).val().toLowerCase();
          $("#modulelist li").each(function(){
              var lineStr = $(this).text().toLowerCase();
              if(lineStr.indexOf(searchTerm) === -1){
                  $(this).hide();
              }else{
                  $(this).show();
              }
          });
      });
  });
  </script>

我似乎不能不包括 ul class = "dropdown-menu" ，它是搜索中的子 li 元素。我不想删除 ul 和 li 元素作为解决方案，因为如果在搜索栏中没有输入任何内容，我仍然需要它们出现。

请帮帮我，提前谢谢你！

标签： javascriptphpjqueryhtmlcss

Answer 1

您可以使用选择器选择下>的第一级li#modulelist

$("#modulelist > li").each((i, e) => {
  console.log(e.tagName, e.className);
});

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<ul class="to_do" id="modulelist">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle">1</a>
    <ul class="dropdown-menu" role="menu">
      <li>1.1</li>
    </ul>
  </li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle">2</a>
    <ul class="dropdown-menu" role="menu">
      <li>2.1</li>
    </ul>
  </li>
</ul>