Question

我具有此功能，它将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>

Answer 1

展开此处给出的solution，您可以使用 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/

或者，如果您确定要定位的#FileContainer div下方没有直接定位的其他元素，则可以使用 .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/

Answer 2

检查

<div id="FileContainer">
    <div id="test-1">          //Set display to none
        <div id="test1-1">
        </div>    //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>
</div>

<button onclick="Test('test-2')">Click</button>
<script>
        function Test(id){              
          var el = document.querySelectorAll("div#FileContainer > div");

          for (var i = 0; i < el.length; i++){
              //if id != requested id then hide it
              if(el[i].id != id){
                el[i].style.display = "none";
              }

          }

        }
</script>

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

2 个答案: