代码之家  ›  专栏  ›  技术社区  ›  Leo Messi

使用querySelector获取包含类的所有元素

  •  1
  • Leo Messi  · 技术社区  · 7 年前

    querySelector() :

    el.querySelector('.fa fa-car').style.display = "none";
    

    这对于一个元素很好,但是如果有更多的元素包含这个类,并且我想将所有元素的显示都更改为“无”,那么这个命令只删除第一个元素,而保留下一个元素不变。

    我试着和你一起做 querySelectorAll() :

     el.querySelectorAll('.fa fa-car').style.display = "none";
    

    但是这个会返回一个错误信息:

    html2canvas:TypeError:无法设置未定义的属性“display”

    关于如何获取包含特定类的所有元素并对其执行操作,有什么想法吗?

    5 回复  |  直到 7 年前
        1
  •  4
  •   misteroptimist    5 年前

    单元法 querySelectorAll()

    使用 Document.querySelectorAll() 获取所有元素。然后使用 forEach() 要在每个元素中设置样式,请执行以下操作:

    var elList = document.querySelectorAll(.fa.fa-car);
    elList.forEach(el => el.style.display = "none");
    

    请注意: 一些旧版本的IE<8) 不会支持 querySelectorAll() . 在这种情况下使用

    Array.from(document.querySelectorAll(.fa.fa-car))
    
        2
  •  2
  •   Rory McCrossan Hsm Sharique Hasan    7 年前

    querySelectorAll()

    还要注意,您的选择器似乎无效。考虑到类规则,我假设您需要同时选择这两个类。试试这个:

    Array.from(el.querySelectorAll('.fa.fa-car')).forEach(function() {
      this.style.display = "none";
    });
    

    或者,当您使用jQuery标记问题时,您可以将所有这些简化为:

    $('.fa.fa-car').hide();
    
        3
  •  1
  •   Chris Li    7 年前

    querySelector只选择一个元素,要选择所有元素可以使用querySelector all

    [].map.call(el.querySelectorAll('.fa fa-car'), n => { n.style.display = 'none'; })
    
        4
  •  0
  •   Aagam Jain    7 年前

    看到了吗 https://www.w3schools.com/jsref/met_document_queryselectorall.asp

    由于querySelectorAll返回array.Iterate 在上面,然后使用style.display

        5
  •  0
  •   Muhammed Sami    7 年前

    $('.fa.fa-car').each(function(){
         $(this).css('color','white');
    })