在JavaScript中创建父母子女的数组

Question

我正在尝试创建父div（ id="lol" ）子级的数组，它们获取它们以更改display:none; 除了id="a"的孩子。 我已经尝试过了，但是没有用。 我如何改进它才能使其正常工作？

function myFunction() {

  var x = document.getElementById('a');

  var children = [].slice.call(document.getElementById('lol').getElementsByTagName('*'),0);
  var arrayLength = children.length;          

  for (var i = 0; i < arrayLength; i++) {
    var name = children[i].getAttribute('id');
    var z = document.getElementById(name);
    z.style.display = 'none';
  }
  x.style.display = 'block';
} 

Answer 1

如果每个孩子都有一个id属性，它将起作用。 否则，有些孩子可能没有id属性，在这种情况下，变量z将undefined和访问style对财产z这是undefined会给错误。 简单的解决方法就是处理undefined变量：

   if(z)      
       z.style.display = 'none';

变量x也是如此。

Answer 2

如何使用jQuery？

$('#lol').children(':not(#a)').hide();

如果没有jQuery选项，则可以执行以下操作：

var lol = document.getElementById('lol');
var children = lol.querySelectorAll(':not(#a)');
for(var i=0;i<children.length;i++) {
    children[i].style.display = 'none';
}

更“低级”：

var lol = document.getElementById('lol');
var children = lol.childNodes;
for(var i=0;i<children.length;i++){
    if(children[i].id != 'a') {
        children[i].style.display = 'none';
    }
}

Answer 3

function myFunction() {


  var children = [].slice.call(document.getElementById('lol').getElementsByTagName('*'),0);
  var arrayLength = children.length;          

  for (var i = 0; i < arrayLength; i++) {
   children[i].style.display = 'none';
  }
  document.getElementById('a').style.display = 'block';
}