我是 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 元素作为解决方案,因为如果在搜索栏中没有输入任何内容,我仍然需要它们出现。
请帮助我,在此先感谢您!
最佳答案
您可以使用>
选择器选择#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>
关于javascript - 如何在 jquery keyup 实时搜索期间排除 <ul> 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58152342/