Javascript 如何根据输入文本搜索显示所有嵌套列表元素？

我正在创建一个web应用程序，当用户搜索某个球员（并且找到了比赛）时，该应用程序将返回NBA球员的姓名和球衣号码

我可以返回已搜索的姓名，但无法返回球衣号码

我已尝试设置

style.display=true

，该设置适用于名称节点，但无法在jersey节点上使用

下面是我的HTML是如何通过JSON的DOM操作创建的：

函数searchPlayer（）{
让输入，过滤，ul，li，playerName，i；
输入=document.getElementById（“搜索栏”）；
filter=input.value.toUpperCase（）；
li=document.getElementById（“玩家列表”）.getElementsByTagName（“li”）；
Object.keys（li）.forEach（函数名）{
playerName=li[name].innerHTML；
if（playerName.toUpperCase（）.indexOf（过滤器）>-1）{
li[name].style.display=true；
}否则{
li[name].style.display=“无”；
}
})
}

Alex Abrines

球衣：8件


昆西酒店
球衣：13


搜索

如果要在使用

显示：无

隐藏列表项后显示列表项，则需要使用

列表项

而不是

真

，并使用

.closest（.player”）

切换父项的显示：

if (playerName.toUpperCase().indexOf(filter) > -1) {
  li[name].closest(".player").display = 'block';
} else {
  li[name].closest(".player").display = "none";
}

注意1:您需要验证您的结构

li

不能是另一个

li

的父级，请检查我更新的HTML格式

注意2:您还需要用公共类替换重复的

id

，因为标识符在同一文档中必须是唯一的

函数searchPlayer（）{
让输入，过滤，ul，li，playerName，i；
输入=document.getElementById（“搜索栏”）；
filter=input.value.toUpperCase（）；
li=document.queryselectoral（#player list.full name”）；
Object.keys（li）.forEach（函数名）{
playerName=li[name].innerHTML；
if（playerName.toUpperCase（）.indexOf（过滤器）>-1）{
li[name]。最近的（“.player”）.style.display='list item'；
}否则{
li[name]。最近的（“.player”）.style.display=“无”；
}
})
}

Alex Abrines

球衣：8件




昆西酒店
球衣：13件

天哪，你是英雄。非常感谢-这真是一种享受！很高兴能帮上忙，先生。