下面的代码用于简单的搜索。我试图计算列表中可见的“li”并在 div“totalClasses”中显示总数。然后当用户搜索一个类时,仅使用可见类更新总数 (li)。
我试过这样做('li:visble')但没有用。
ul = document.getElementById('myUl');
li = ul.getElementsByTagName('li');
aa = ul.getElementsByTagName('li:visible');
document.getElementById('totalClasess').innerHTML = (aa.length) + " Results";
function search() {
var input, filter, ul, li, a, aa;
input = document.getElementById('myInput');
filter = input.value.toUpperCase();
ul = document.getElementById('myUl');
li = ul.getElementsByTagName('li');
for (var i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName('a')[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = '';
} else {
li[i].style.display = 'none';
}
}
}
<input type="text" id="myInput" onkeyup="search()" placeholder="Search for a class..." title="Type something">
<p class="results">Results</p>
<p id="totalClasess"></p>
<ul id="myUl">
<li><a href="#" class="header">Section 1</a></li>
<li><a href="#">Class 1 </a></li>
<li><a href="#">Class 2</a></li>
<li><a href="#">Class 3</a></li>
</ul>
最佳答案
每次调用事件处理程序时都需要更新计数。你可以这样做:
function search()
{
var input, filter, ul, li, a, aa;
input = document.getElementById('myInput');
filter = input.value.toUpperCase();
ul = document.getElementById('myUl');
li = ul.getElementsByTagName('li');
var liCount = 0;
for(var i=0; i<li.length; i++){
a = li[i].getElementsByTagName('a')[0];
if(a.innerHTML.toUpperCase().indexOf(filter) > -1){
li[i].style.display = '';
liCount++;
} else {
li[i].style.display = 'none';
}
}
document.getElementById('totalClasess').innerHTML = liCount + " Results";
}
关于javascript - 如何计算搜索列表中可见的 'li',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45152463/