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

如果每个孩子都有.image-box { display: flex; flex-wrap: wrap; justify-content: space-between; }属性，那么它将起作用。否则，某些孩子可能没有id属性，在这种情况下，变量id将为z并且undefined属性超过style z会给出错误。简单的解决方法就是处理undefined变量：

undefined

变量if(z) z.style.display = 'none';也是如此。

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

更多＆＃34;低级＆＃34;：

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中创建父项子集的数组

3 个答案: