Question

我有一个搜索实用程序，其中每个部分都有一个<h1>标签标题。在每个部分中，都有一个跨度，我可以使用过滤器进行搜索并显示或不显示它们。我遇到的问题是我不确定如何在包装器中定位<h1>标签并显示它。

我正在考虑让另一个脚本查看元素，并检查子代的显示样式是否没有样式，尽管这似乎是一种野蛮的做法。

这是一个小例子。如果您搜索该号码，则列表过滤器将按原样进行搜索，并且标题当然仍然存在。如果该部分中的列表为“空”或隐藏，那么我想隐藏的是<h1>标签。有什么建议吗？

我可以在抓取parentNode的parentNode并检查样式的地方做些什么吗？

还是可能获取列表的列表（list1，list2，list3），并在过滤器搜索中还检查是否显示了它们的childNode？

	function search() {
		var input, filter, content, txtValue,list;
		input = document.getElementById("search-input");
		filter = input.value.toUpperCase();
		list = document.getElementById("search-list");
		content = list.getElementsByTagName("span");
		for (i = 0; i < content.length; i++) {
			if (content) {
				txtValue = content[i].innerHTML;
				if (txtValue.toUpperCase().indexOf(filter) > -1) {
					content[i].parentNode.style.display = "";
				} else {
					content[i].parentNode.style.display = "none";
				}
			}       
		}
	}

<div class="container">
  <input type="text" id="search-input" placeholder="Search for numbers" onkeyup="search()">
  <div id="search-list">
    <div class="list1">
      <h1> List 1</h1>
      <button><span>one</span></button>
      <button><span>two</span></button>
      <button><span>three</span></button>
    </div>
    <div class="list2">
      <h1> List 2</h1>
      <button><span>four</span></button>
      <button><span>five</span></button>
      <button><span>six</span></button>
    </div>
    <div class="list3">
      <h1> List 3</h1>
      <button><span>seven</span></button>
      <button><span>eight</span></button>
      <button><span>nine</span></button>
    </div>
  </div>
</div>

Answer 1

content[index]

返回一个span元素。

层次结构中的上一级是父级-按钮。

按钮的父级是另一个上一级- div 。

h1 标记是div的下一个子标记，因此可以使用

进行访问

content[index].parentNode.parentNode.children[0]

检查子节点的样式

1 个答案: