在 javascript 中创建 parents children 的数组

Question

我正在尝试创建一个 parent div 的 (id="lol") children 的数组，然后他们获取它们以更改 display:none;除了 child 和 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

如果每个 child 都有一个 id 属性，那么它将起作用。否则，某些 children 可能没有 id 属性，在这种情况下，变量 z 将是 undefined 并且访问 style 属性 over 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';
}

更多"low-level":

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';
}

在 javascript 中创建 parents children 的数组

Create an array of a parents children in javascript

javascript

css

arrays

parent-child

displayobject