Question

以下是我一直在关注的内容： https://www.w3schools.com/howto/howto_js_filter_lists.asp

这里是完整的代码（来自W3Schools）：

<!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: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="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>

  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</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>

所以我的问题主要是关于for循环中的东西。

1）a = li[i].getElementsByTagName("a")[0];

为什么在每个列表项中只有一个锚时，需要指定锚的索引？看起来你不必，但当你删除[0]时，＆＃34; a＆＃34;变量变得不确定。

2）a.innerHTML.toUpperCase().indexOf(filter) > -1

有人可以解释这条线的含义吗？如果我理解正确，＆＃34; indexOf（过滤器）＆＃34;应该返回一个数字，＆＃34; a.innerHTML.toUpperCase（）＆＃34;一个字符串。这是比较的简写吗？如果是这样，它不应该返回真或假？因为0是假的，并且它上面的一切都是真的，为什么-1？

Answer 1

1）a = li [i] .getElementsByTagName（“a”）[0];

为什么在每个列表项中只有一个锚时，需要指定锚的索引？看起来你不必这么做，但是当你删除[0]时，“a”变量就变得不确定了。

<强>答案 getElementsByTagName将始终返回项目列表，即使只有一个项目（但也可以是none或many）。这就是为什么你需要从这个列表/数组中获取第一个元素

2）a.innerHTML.toUpperCase（）。indexOf（filter）＆gt; -1

有人可以解释这条线的含义吗？如果我理解正确，“indexOf（filter）”应返回一个数字，“a.innerHTML.toUpperCase（）”应该返回一个字符串。这是比较的简写吗？如果是这样，它不应该返回真或假？因为0是假的，并且它上面的一切都是真的，为什么-1？

<强>答案

a.innerHTML

从元素

中选择内部HTMl

a.innerHTML.toUpperCase()

将使元素中的文本大写，这样你就可以找到一个匹配过滤器，它也是大写的，所以字符串匹配

.indexOf(filter)

在元素/标记内的文本中查找第一次出现的过滤器。如果找到过滤器中的文本，则indexOf将返回字符串中将为0或更高的位置。如果未找到过滤器中的文本，则indexOf将返回 -1 Here are the docs

a.innerHTML.toUpperCase().indexOf(filter) > -1

将结果比较大于-1，使其成为布尔表达式，得到真/假

Answer 2

为什么在每个列表项中只有一个锚时，需要指定锚的索引？

因为getElementsByTagName返回元素的序列，并且您需要序列中的任何索引。请注意，序列适用于没有元素，单个元素或许多元素的情况。能够对所有案例进行相同处理是件好事。否则，您必须检查null，序列或单个元素。

如果我理解正确，＆＃34; indexOf（过滤器）＆＃34;应该返回一个数字，＆＃34; a.innerHTML.toUpperCase（）＆＃34;一个字符串。

右。所以a.innerHtml.toUpperCase().indexOf(filter)是一个数字。如果过滤器出现在a.innerHtml.toUpperCase()生成的字符串中，那么您将获得该位置的索引，该索引将大于或等于0.这与大于-1的索引相同。

有关W3Schools过滤/搜索列表的问题

2 个答案: