关于 W3Schools 过滤器/搜索列表的问题答案

【问题标题】：Questions about the W3Schools Filter/Search list关于 W3Schools 过滤器/搜索列表的问题
【发布时间】：2017-09-25 19:53:33
【问题描述】：

这是我一直在查看的内容： 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] 时，“a”变量将变为未定义。

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

有人能解释一下这条线是什么意思吗？如果我理解正确，“indexOf(filter)”应该返回一个数字，“a.innerHTML.toUpperCase()”应该返回一个字符串。这是比较的简写吗？如果是这样，它不应该返回真还是假？既然 0 是假的，而它上面的一切都是真的，为什么 -1？

【问题讨论】：

你应该尝试一次问一个问题
getElementsByTagName 将始终返回一个项目列表，即使只有一个项目（但也可能没有或很多）。这就是为什么你需要从这个列表/数组中获取第一个元素

标签： javascript for-loop filter syntax comparison

【解决方案1】：

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

为什么在每个列表项中只有一个锚点时需要指定锚点的索引？似乎您不必这样做，但是当您删除 [0] 时，“a”变量将变为未定义。

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

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

回答

a.innerHTML

从 a 元素中选择内部 HTML

a.innerHTML.toUpperCase()

将使 a 元素中的文本大写，以便您可以找到过滤器的匹配项，该过滤器也已大写，因此字符串将匹配

.indexOf(filter)

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

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

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

【讨论】：

【解决方案2】：

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

因为 getElementsByTagName 返回元素的序列，并且您需要序列中的任何索引。请注意，序列适用于没有元素、单个元素或多个元素的情况。能够一视同仁地对待所有病例是件好事。否则，您必须检查 null、序列或单个元素。

如果我理解正确，“indexOf(filter)”应该返回一个数字，“a.innerHTML.toUpperCase()”应该返回一个字符串。

没错。所以a.innerHtml.toUpperCase().indexOf(filter) 是一个数字。如果过滤器出现在a.innerHtml.toUpperCase()产生的字符串中，那么你会得到位置的索引，它会大于等于0，相当于大于-1。

【讨论】：