約W3Schools的過濾器/搜索列表

-1

的問題在這裏是我一直在尋找的東西在： https://www.w3schools.com/howto/howto_js_filter_lists.asp 約W3Schools的過濾器/搜索列表

下面是完整的代碼（從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];

爲什麼你需要有其中只有1在每個列表中的項目時指定錨的指數？看起來你不需要，但是當你刪除[0]時，那麼「a」變量變得不確定。

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

有人能解釋這條線意味着什麼？如果我理解正確，「indexOf（filter）」應該返回一個數字，而「a.innerHTML.toUpperCase（）」是一個字符串。這是比較的簡寫嗎？如果是這樣，它不應該返回真或假？由於0是錯誤的，並且它上面的所有內容都是真的，爲什麼是-1

來源

2017-09-25 Donavon Cai

你應該嘗試並一次詢問一次問題 – Peter

getElementsByTagName將始終返回一個項目列表，即使只有一個項目（但它也可以不包含任何項目或許多項目）。這就是爲什麼你需要從這個列表/數組中獲得第一個元素 – Peter

爲什麼當每個列表項中只有1個錨點時，需要指定錨點的索引？

因爲getElementsByTagName返回一系列元素，並且您需要序列中的任何索引。請注意，一個序列在沒有元素，單個元素或許多元素的情況下起作用。能夠把所有情況都對待是很好的。否則，你必須檢查空，序列或單個元素。

如果我理解正確，「indexOf（filter）」應該返回一個數字，而「a.innerHTML.toUpperCase（）」是一個字符串。

沒錯。所以a.innerHtml.toUpperCase().indexOf(filter)是一個數字。如果過濾器出現在由a.innerHtml.toUpperCase()產生的字符串中，那麼您將得到位置的索引，該位置將大於或等於0.這與大於-1相同。

來源

2017-09-25 20:03:47

1）a = li [i] .getElementsByTagName（「a」）[0];

爲什麼當每個列表項中只有1個錨點時，您需要指定錨點的索引？看起來你不需要，但是當你刪除[0]時，那麼「a」變量變得不確定。

答案 getElementsByTagName將始終返回一個項目列表，即使只有一個項目（但它也可以不是或多個）。這就是爲什麼你需要從該列表中得到的第一個元素/陣列

2）a.innerHTML.toUpperCase（）的indexOf（過濾器）> -1

回答

a.innerHTML

選擇從一個元素的內部HTML

a.innerHTML.toUpperCase()

將使文本的一個元素大寫的，所以你可以找到過濾器匹配這也被上部箱體所以弦將匹配

.indexOf(filter)

在元素/標記內的文本中查找過濾器的第一次出現。如果找到過濾器中的文本，則indexOf將返回字符串中的位置爲0或更高的位置。如果沒有被發現在過濾器中的文本，然後IndexOf返回-1 Here are the docs

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

結果相比必須大於-1使這是一個布爾表達式導致真/假

來源

2017-09-25 20:04:57 Peter

約W3Schools的過濾器/搜索列表

回答

相關問題