我是JS的新手,我遵循W3CSchools筛选器列表指南,该指南在使用getElementbyId时效果很好,但是据我了解,ID必须是页面唯一的。
我已更改为getElementsByClassName,但它似乎无法正常工作。我只想在myUL类而不是在somedivclass3中可以找到的其他UL类中过滤结果。
我还希望能够以任何顺序匹配整个或部分单词,例如 “ diff”将匹配4 li中的3 li,“ different even”应匹配1 li。
JS:
<script>
function myFunction() {
// Declare variables
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById('myInput');
filter = input.value.toUpperCase();
ul = document.getElementsByClassName("myUL");
li = ul.getElementsByTagName('li');
// Loop through all list items, and hide those who don't match the search query
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
HTML:
<input type="text" id="myInput" placeholder="Search for names..">
<input type="submit" onclick="myFunction()" value="Go">
<div class="somedivclass1">
<ul class="myUL">
<li>Text here</li>
<li>Different text here</li>
</ul>
</div>
<div class="somedivclass2">
<ul class="myUL">
<li>Even more different text here</li>
<li>Wildly different text here</li>
</ul>
</div>
<div class="somedivclass3">
<ul class="otherUL">
<li>Footer link 1</li>
<li>Footer link 2</li>
</ul>
</div>
我希望它可以按照W3C学校中的示例进行操作:https://www.w3schools.com/howto/howto_js_filter_lists.asp
谢谢您的帮助!
答案 0 :(得分:0)
getElementsByClassName()
将返回一个元素数组,因为可能有很多具有相同类的元素。因此,请尝试先遍历所有ul,然后遍历li:
for (i = 0; i < ul.length; i++)
{
li = ul[i].getElementsByTagName('li');
for(j = 0; j< li.length; j++)
{
a = li[j].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1)
{
li[j].style.display = "";
}
else
{
li[j].style.display = "none";
}
}
}
答案 1 :(得分:0)
我稍微重写了您的功能,您可以将其作为代码段找到。
使用正确的类在“ ul”上进行第一次循环,然后在“ li”上进行第二次循环 使用jquery,您只需一行即可:)
function myFunction() {
// Declare variables
var input = document.getElementById('myInput');
var filter = input.value.toUpperCase();
//var li = document.getElementsByTagName('li');
var uls = document.getElementsByClassName("myUL");
for (var i = 0; i < uls.length; i++) {
var ul = uls[i];
var lis = ul.getElementsByTagName("li");
for (var j = 0; j < lis.length; j++) {
var li = lis[j];
var txtValue = li.textContent || li.innerText;
if (filtering(txtValue, filter)) {
li.style.display = "";
} else {
li.style.display = "none";
}
}
}
}
function filtering(text, searchString) {
const regexStr = '(?=.*' + searchString.split(/\,|\s/).join(')(?=.*') + ')';
const searchRegEx = new RegExp(regexStr, 'gi');
return text.match(searchRegEx) !== null;
}
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<div class="somedivclass">
<ul class="myUL">
<li>Text here</li>
<li>Different text here</li>
</ul>
</div>
<div class="somedivclass2">
<ul class="myUL">
<li>Even more different text here</li>
<li>Widly different text here</li>
</ul>
</div>