問題

我是javascript / jquery的新手,我試圖弄清楚如何在ul id =“#moduleList”下排除/過濾ul類=“dropdown-menu”.我仍然希望能夠搜尋不在ul類=“dropdown-menu”下的li元素.Below是我的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類=“dropdown-menu”,它是搜尋中的子li元素.我不想刪除ul和li元素作為解決方案,因為如果搜尋欄中沒有任何內容,我仍然需要它們出現.

請幫我,並提前感謝您!

  最佳答案

您可以使用 > 選擇器在 #modulelist 下選擇第一級 li

 $("#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> 

  相同標籤的其他問題

javascriptphpjqueryhtmlcss