[英]Using id to get li elements from two ul lists
First up, I'm a total noob with Javascript, no doubt.首先,毫无疑问,我是 Javascript 的菜鸟。 This Javascript is for a search list and filtering items out of that list, It works pretty well, but only for one of the
ul
lists (the first one) in the code.这个 Javascript 用于搜索列表并从该列表中过滤项目,它工作得很好,但仅适用于代码中的一个
ul
列表(第一个)。
So the question is, how do I get it to work for both ul
lists.所以问题是,我如何让它适用于两个
ul
列表。 I've tried renaming id
s for the second list and posting the script again with changed id
s and so on, but nothing really seems to work.我已经尝试为第二个列表重命名
id
并再次使用更改的id
发布脚本等等,但似乎没有任何效果。 Thank you in advance, I am really stuck and don't know what to try next.提前谢谢你,我真的被卡住了,不知道下一步该尝试什么。
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Name.."> <ul id="myUL"> <li><a class="volcanion-unb">Volcanion (UNB)</a></li> <li><a class="centiskorch-vmax">Centiskorch Vmax</a></li> <li><a class="centiskorch-v">Centiskorch V</a></li> </ul> <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Name.."> <ul id="myUL"> <li><a class="volcanion-unb2">Volcanion (UNB)</a></li> <li><a class="centiskorch-vmax2">Centiskorch Vmax</a></li> <li><a class="centiskorch-v2">Centiskorch V</a></li> </ul> <script> function myFunction() { // Declare variables var input, filter, ul, li, a, i, txtValue; input = document.getElementById('myInput'); filter = input.value.toUpperCase(); ul = document.getElementById("myUL"); li = ul.getElementsByTagName('li'); // 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]; txtValue = a.textContent || a.innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { li[i].style.display = ""; } else { li[i].style.display = "none"; } } } </script> </body> </html>
The reason your code is only working for the first list has to do with this line:您的代码仅适用于第一个列表的原因与此行有关:
ul = document.getElementById("myUL");
The getElementById
method will only return one element, so it is completely ignoring the second element with the same id
. getElementById
方法只会返回一个元素,因此它完全忽略了具有相同id
的第二个元素。 (More information on getElementById
here ) It is generally a "best practice" to use an id
only once per html page. (在此处获取有关
getElementById
的更多信息)通常每个 html 页面仅使用一次id
是“最佳实践”。
In order to get around this, you could give the other ul
a different id
(let's say <ul id="myUL2">
).为了解决这个问题,您可以给另一个
ul
一个不同的id
(比如说<ul id="myUL2">
)。 However, I think it would be much more efficient to get all the li
s at once, as you originally intended.但是,我认为按照您最初的意图,一次获取所有
li
会更有效率。 You should be able to simply to skip assigning ul
altogether and do this:您应该能够完全跳过分配
ul
并执行以下操作:
li = document.getElementsByTagName('li');
This will grab the li
elements from the whole document
, for you to then manipulate as desired.这将从整个
document
中获取li
元素,然后您可以根据需要进行操作。 ( More information on getElementsByTagName
here ) ( 有关
getElementsByTagName
的更多信息,请点击此处)
Here is that solution inserted into your original code:这是插入到原始代码中的解决方案:
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Name..">
<ul id="myUL">
<li><a class="volcanion-unb">Volcanion (UNB)</a></li>
<li><a class="centiskorch-vmax">Centiskorch Vmax</a></li>
<li><a class="centiskorch-v">Centiskorch V</a></li>
</ul>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Name..">
<ul id="myUL2">
<li><a class="volcanion-unb2">Volcanion (UNB)</a></li>
<li><a class="centiskorch-vmax2">Centiskorch Vmax</a></li>
<li><a class="centiskorch-v2">Centiskorch V</a></li>
</ul>
<script>
function myFunction() {
// Declare variables
var input, filter, li, a, i, txtValue;
input = document.getElementById('myInput');
filter = input.value.toUpperCase();
li = document.getElementsByTagName('li');
// 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];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.