时间戳

首页 > 解决方案 > 如何更改 div 中仅第一个子 div 的属性

javascript - 如何更改 div 中仅第一个子 div 的属性

问题描述

我有这个功能，它将一个 div 中所有 div 的显示属性重置为无，然后将选定的设置为阻止。

function Test(id) 
        {
        var allFiles = document.getElementById("FileContainer").getElementsByTagName("div");
        for(i=0; i< allFiles.length; i++)
            allFiles[i].style.display="none";

        var selected = document.getElementById(id);
            selected.style.display="block";
        }

问题在于，这也将子 div 的子 div 的显示设置为 none。如何使其仅适用于第一个子级别？

<div id="FileContainer">
    <div id="test-1">          //Set display to none
        <div id="test1.1">    //Do not set display to none
    </div> 
    <div id="test-2">        //Set display to none
        <div id="test1.1">  //Do not set display to none
    </div>
</div>

标签： javascripthtmlcss

解决方案

扩展此处给出的解决方案，您可以使用CSS Child Combinator选择器“>”allFiles将变量分配给所有直接子 div，如下所示：

/* JavaScript */
var allFiles = document.querySelectorAll("#FileContainer > div");
var btn = document.querySelector("button");
var val = document.getElementById("val");

function func() {
  allFiles.forEach(div => {
  	if (div.id == val.value) {
        div.style.display = "none";
    }
  });
}
  
  btn.addEventListener("click", func);
/* CSS */
#FileContainer {color: white;}
#test-1 {background-color: green;}
#test-2 {background-color: green;}
#test3 {background-color: red;}
#test4 {background-color: red;}
<!--HTML-->
<div id="FileContainer">
    <div id="test-1">Direct Child 1<div id="test3">Not Direct Child 1</div></div> 
    <div id="test-2">Direct Child 2<div id="test4">Not Direct Child 2</div></div>
</div>
<hr>
<input type="text" id="val" />

<button>Check ID</button>
<hr>

jsFiddle使用CSS Child Combinator选择器“>”：http: //jsfiddle.net/AndrewL64/5nuedztx/20/

或者，如果您确定#FileContainerdiv 下没有其他要定位的元素，您可以使用.children属性，如下所示：

/* JavaScript */
var allFiles = document.querySelector("#FileContainer").children;
var btn = document.querySelector("button");
var val = document.getElementById("val");

function func(){
  [].forEach.call(allFiles, (div => {
      if (div.id == val.value) {
      div.style.display = "none";
    }
  }))
}

btn.addEventListener("click", func);
/* CSS */
#FileContainer {color: white;}
#test-1 {background-color: green;}
#test-2 {background-color: green;}
#test3 {background-color: red;}
#test4 {background-color: red;}
<!-- HTML -->
<div id="FileContainer">
    <div id="test-1">Direct Child 1<div id="test3">Not Direct Child 1</div></div> 
    <div id="test-2">Direct Child 2<div id="test4">Not Direct Child 2</div></div>
</div>
<hr>
<input type="text" id="val" />

<button>Check ID</button>
<hr>

jsFiddle使用.children：http: //jsfiddle.net/AndrewL64/zkgjxhfc/30/

推荐阅读