Question

我正在使用w3School's tutorial来创建过滤器列表。我想知道是否有办法检查列表何时为空并执行函数，以及列表中是否存在某些内容并执行函数。可能吗？感谢。

Answer 1

您可以使用querySelectorAll获取所有li，然后查看其数量。

if(document.querySelectorAll("#myUL li").length === 0) {
    // The list is empty
} else {
    // The list is not empty
}

修改

正如Punit所注意到的（请参阅此答案的评论），li元素不会被删除但会隐藏。

要在搜索后执行或不执行函数列表是否为空，最简单的方法是修改for循环以添加存储结果数量的变量：

var foundCount = 0;
for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
        li[i].style.display = "";
        foundCount++; // Increment the count
    } else {
        li[i].style.display = "none";
    }
}

然后测试foundCount变量：

if(foundCount === 0) {
    // List is empty
} else {
    // There is at least one element
}

Answer 2

我将教程中的代码复制到此代码段。

只需拥有count变量并在搜索查询匹配时递增它，然后检查count是否为0。

function myFunction() {
  // Declare variables
  var input, filter, ul, li, a, i, count;
  input = document.getElementById('myInput');
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName('li');

  count = 0;

  // 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];
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
      count++;
    } else {
      li[i].style.display = "none";
    }
  }

  console.log(count);

  if (count > 0) {
    // one or more names
  } else {
    // no names
  }
}

#myInput {
  width: 100%;
  /* Full-width */
  font-size: 16px;
  /* Increase font-size */
  padding: 12px 20px 12px 40px;
  /* Add some padding */
  border: 1px solid #ddd;
  /* Add a grey border */
  margin-bottom: 12px;
  /* Add some space below the input */
}
#myUL {
  /* Remove default list styling */
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#myUL li a {
  border: 1px solid #ddd;
  /* Add a border to all links */
  margin-top: -1px;
  /* Prevent double borders */
  background-color: #f6f6f6;
  /* Grey background color */
  padding: 12px;
  /* Add some padding */
  text-decoration: none;
  /* Remove default text underline */
  font-size: 18px;
  /* Increase the font-size */
  color: black;
  /* Add a black text color */
  display: block;
  /* Make it into a block element to fill the whole list */
}
#myUL li a.header {
  background-color: #e2e2e2;
  /* Add a darker background color for headers */
  cursor: default;
  /* Change cursor style */
}
#myUL li a:hover:not(.header) {
  background-color: #eee;
  /* Add a hover effect to all links, except for headers */
}

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">

<ul id="myUL">
  <li><a href="#" class="header">A</a>
  </li>
  <li><a href="#">Adele</a>
  </li>
  <li><a href="#">Agnes</a>
  </li>

  <li><a href="#" class="header">B</a>
  </li>
  <li><a href="#">Billy</a>
  </li>
  <li><a href="#">Bob</a>
  </li>

  <li><a href="#" class="header">C</a>
  </li>
  <li><a href="#">Calvin</a>
  </li>
  <li><a href="#">Christina</a>
  </li>
  <li><a href="#">Cindy</a>
  </li>
</ul>

Answer 3

如果您只想知道该列表是否为空，您可以检查其高度是否为零：

if (document.getElementById('myUL').clientHeight)) {
    console.log('The list contains at least one element.')
} else {
    console.log('The list is empty.')
}

如果您想要更精确地计算可见元素的数量，您可以使用类似的策略并利用（在您的情况下）所有列表元素具有相同高度的事实。可见项目的数量只是列表高度与项目高度的比率。

＆＃13;

var ul = document.getElementById('myUL'),
    itemHeight = ul.firstElementChild.clientHeight

function getVisibleItemCount() {
  return Math.round(ul.clientHeight / itemHeight)
}

document.getElementById('myInput').addEventListener('keyup', function() {
  console.log(getVisibleItemCount())
})

＆＃13;

<!-- Tutorial Source: http://www.w3schools.com/howto/howto_js_filter_lists.asp -->
<!DOCTYPE html>
<html>

<head>
  <style>
    * {
      box-sizing: border-box;
    }
    #myInput {
      background-image: url('/css/searchicon.png');
      background-position: 10px 12px;
      background-repeat: no-repeat;
      width: 100%;
      font-size: 16px;
      padding: 12px 20px 12px 40px;
      border: 1px solid #ddd;
      margin-bottom: 12px;
    }
    #myUL {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }
    #myUL li a {
      border: 1px solid #ddd;
      margin-top: -1px;
      /* Prevent double borders */
      background-color: #f6f6f6;
      padding: 12px;
      text-decoration: none;
      font-size: 18px;
      color: black;
      display: block
    }
    #myUL li a.header {
      background-color: #e2e2e2;
      cursor: default;
    }
    #myUL li a:hover:not(.header) {
      background-color: #eee;
    }
  </style>
</head>

<body>

  <h2>My Phonebook</h2>

  <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

  <ul id="myUL">
    <li><a href="#" class="header">A</a>
    </li>
    <li><a href="#">Adele</a>
    </li>
    <li><a href="#">Agnes</a>
    </li>

    <li><a href="#" class="header">B</a>
    </li>
    <li><a href="#">Billy</a>
    </li>
    <li><a href="#">Bob</a>
    </li>

    <li><a href="#" class="header">C</a>
    </li>
    <li><a href="#">Calvin</a>
    </li>
    <li><a href="#">Christina</a>
    </li>
    <li><a href="#">Cindy</a>
    </li>
  </ul>

  <script>
    function myFunction() {
      var input, filter, ul, li, a, i;
      input = document.getElementById("myInput");
      filter = input.value.toUpperCase();
      ul = document.getElementById("myUL");
      li = ul.getElementsByTagName("li");
      for (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";

        }
      }
    }
  </script>

</body>

</html>

＆＃13;

检测列表是否为空

3 个答案:

修改