Question

以下代码用于简单搜索。我试图计算列表中可见的'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>

DEMO：https://jsfiddle.net/52bbqor9/

Answer 1

每次调用事件处理程序时都需要更新计数。你可以这样做：

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";
}

Answer 2

'li：visible'不是标签，你要添加一个伪选择器并希望最好，这是行不通的。

你可以去

ul.querySelectorAll('li:visible')

如果你不关心Firefox。如果你这样做，我会推荐jQuery。

ul.find('li:visible');

Answer 3

我只会在搜索功能中存储show对象的数量，并在搜索功能结束时更新相关元素：

function search() {
  var input, filter, ul, li, a, aa, count =0;
  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 = '';
      count++;
    } else {
      li[i].style.display = 'none';
    }
  }
  document.getElementById('totalClasess').innerHTML = count + " Results";
}

Answer 4

只需在搜索时更新计数

var ip = document.getElementById('myInput');
var ul = document.getElementById('myUl');
var li = ul.getElementsByTagName('li');

document.getElementById('totalClasess').innerHTML = (li.length) + " Results";

ip.addEventListener('input', function() {
  var val = this.value.toUpperCase(), idx = 0;

  for (var i = 0; i < li.length; i++) {
    var txt = li[i].textContent.toUpperCase();

    if (txt.indexOf(val) != -1) {
      li[i].style.display = 'block';
      idx++;
    } else {
      li[i].style.display = 'none';
    }

    document.getElementById('totalClasess').innerHTML = idx + " Results";
  }
});

<input type="text" id="myInput" 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>

Answer 5

您正在尝试在加载元素之前附加事件侦听器函数。添加一行就可以了解

document.getElementById('myInput').onkeyup = search;

working code

Answer 6

＆＃13;

ul = document.getElementById('myUl');
li = ul.getElementsByTagName('li');

divs = document.querySelectorAll('#myUl > li');
var divsArray = [].slice.call(divs);
var aa = divsArray.filter(function(el) {
    return getComputedStyle(el).display !== "none"
});


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';
    }
  };
  var divsArray = [].slice.call(divs);
    aa = divsArray.filter(function(el) {
    return getComputedStyle(el).display !== "none"
});
document.getElementById('totalClasess').innerHTML = (aa.length) + " Results";
}

＆＃13;

<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>

＆＃13;

Answer 7

我简化了你的代码：

https://jsfiddle.net/52bbqor9/1/

您可以使用:not()选择器检查项目，并检查是否存在某些内容，例如课程。然后，您将它与querySelectorAll结合使用并得到如下长度：

let itemCount = document.querySelectorAll('#myUl li:not(.hidden)').length;

至于:visible伪类选择器，它是一个jQuery的东西，而不是一个真正的JavaScript Pseudo-class。我创建了课程hidden，您可以在下面看到。

然后我删除了你的html中的onkeyup，并在下面的javascript中创建了它（我也将其更改为input）。否则HTML没有改变。

<input type="text" id="myInput" 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>

这是我根据输入文本添加/删除的hidden类的创建位置。

.hidden { display: none; }

接下来，我们搜索项目并针对正则表达式进行测试，如下所示：

// Get the elements we want to work with
let input = document.querySelector('#myInput');
let list = document.querySelectorAll('#myUl li');
let results = document.querySelector('.results');

// Attach an eventlistener to the search box
input.addEventListener('input', e => {
  // Create a regexp to test against each item
  let search = new RegExp('^' + e.target.value, 'i');
  // Loop through the list of li items
  for (let item of list) {
    // Test the current item
    if (search.test(item.innerText.trim())) {
      // Remove the hidden class if it matches
      item.classList.remove('hidden');
    } else {
      // Add the hidden class if it doesn't match
      item.classList.add('hidden');
    }
  }
  // Get a count of li items without `.hidden`
  results.innerText = 'Results ' + document.querySelectorAll('#myUl li:not(.hidden)').length;
});

我们要做的最后一件事就是计算所有没有附加.hidden类的项目，并将其显示在results段落标记中。

Answer 8

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';
    }
}

var visibleLi = [];
var items = document.getElementById("myUl").getElementsByTagName("li");
for (var i = 0; i < items.length; i++) {

    if (items[i].style.display != "none") {
        visibleLi.push(items[i]);
    }
}
 document.getElementById('totalClasess').innerHTML = (visibleLi.length) + " 
Results";
}

如何计算搜索列表中的可见“li”

8 个答案: