有没有更好的方法一次隐藏多个元素？

Question

这非常合适，但为了将来参考，我想知道是否有更好的方法来做到这一点。

document.getElementsByTagName('h1')[0].style.display = 'none';
document.getElementsByTagName("p")[0].style.display = 'none';
document.getElementsByTagName("p")[1].style.display = 'none';
document.getElementsByTagName("ul")[0].style.display = 'none';
document.getElementsByTagName("hr")[0].style.display = 'none';

如果有帮助，我愿意使用jQuery。

Answer 1

虽然没有特别要求jQuery，但是完全符合OP的示例代码是最短的实现：

$('h1:eq(0), ul:eq(0), hr:eq(0), p:lt(2)').hide();

Answer 2

将您的节点保存在 Array 中，然后您可以编写一些隐藏或显示整个 Array （或 NodeList ）的函数一次，例如

function display_none(nodelist) {
    var i = nodelist.length;
    while (i-- > 0)
        nodelist[i].style.display = 'none';
}

function display_default(nodelist) {
    var i = nodelist.length;
    while (i-- > 0)
        nodelist[i].style.display = '';
}

所以你有

var elms = [
    document.getElementsByTagName('h1')[0],
    document.getElementsByTagName("p")[0],
    document.getElementsByTagName("p")[1],
    document.getElementsByTagName("ul")[0],
    document.getElementsByTagName("hr")[0]
];

现在可以简单地做到

display_none(elms); // hide them all
display_default(elms); // return to default

Answer 3

这是一个纯Javascript选项，它为:lt(n)伪选择器实现类似jQuery的扩展，因此您可以指定所需的每个标记。

根据提出的问题，这会对前两个"p"标记进行操作，然后是第一个"h1"，"ul"和"hr"标记：

function hideItems(selector) {
    var r = /:lt\((\d+)\)/;
    selector.split(',').forEach(function(item) {
         var len, elems, i, m = item.match(r);
         if (m) {
             item = item.replace(r, "");
             elems = document.querySelectorAll(item);
             len = Math.min(+m[1], elems.length);
         } else {
             elems = document.querySelectorAll(item);
             len = elems.length;
         }
         for (i = 0; i < len; i++) {
            elems[i].style.display = 'none';
         }
     });    
}

hideItems('p:lt(2),h1:lt(1),ul:lt(1),hr:lt(1)');

工作演示：http://jsfiddle.net/jfriend00/m9vspymz/

Answer 4

Using Pure JavaScript

//gets all DOM elements with a tag of p or li
var elems = document.querySelectorAll('p,li');
//loops over all elements
for(var i = 0;i < elems.length; i++)
{
    //hides each element in the array
    elems[i].style.display = 'none';   
}

专门为您准备的代码

var elems = document.querySelectorAll('p,h1,ul,hr');
for(var i = 0;i < elems.length; i++)
{
    elems[i].style.display = 'none';   
}

Answer 5

以下是代码（ JavaScript ）：

var n = [ // 'tagname',which in order
'h1',0,
'p',0,
'p',1,
'ul',0,
'hr',0
];
for(var i = 0;i < elems.length)
{
    document.getElementsByTagName(n[i*2])[(n[i*2]+1)].style.display = 'none';
    i++;
    i++;
}