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

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

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有帮助的话，我愿意使用它

//获取标记为p或li的所有DOM元素
var elems=document.queryselectoral（'p，li'）；
//在所有元素上循环
对于（变量i=0；i

---

专门为您编写的代码

var elems=document.queryselectoral（'p，h1，ul，hr'）；
对于（变量i=0；i

将节点保留在一个数组中，然后您可以编写一些函数，这些函数将一次隐藏或显示整个数组（或节点列表），例如

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

---

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

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

下面是代码（JavaScript）：

var n=[/'标记名'，按顺序排列
'h1'，0，
'p'，0，
"p",1,，
“ul”，0，
“hr”，0
];
对于（变量i=0；i<元素长度）
{
document.getElementsByTagName（n[i*2]）[（n[i*2]+1）].style.display='none'；
i++；
i++；
}

这里有一个纯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)');

函数隐藏项（选择器）{
变量r=/：lt\（\d+）/；
selector.split（'，）.forEach（函数（项）{
变量len，elems，i，m=项匹配（r）；
如果（m）{
项目=项目。替换（r，“”）；
elems=document.queryselectoral（项）；
len=数学最小值（+m[1]，元素长度）；
}否则{
elems=document.queryselectoral（项）；
len=元素长度；
}
对于（i=0；i

---

工作演示：

标记jquery时。。在jquery中你需要它吗？如果你在问题中没有提到jquery，那么删除

jquery

tag是否更好？@TaoP.R.：不。标记

jquery

是可以的，即使你在问题中没有使用它，表明jquery特定的答案是可以的。不过，最好在问题中根本不使用jQuery时在文本中明确指出这一点。唯一的问题是它隐藏了所有的

p

，但我有第三个问题需要保持可见。@BrandonHellman请用完整的HTML和您想要的结果更新您的问题，谢谢。我认为OP的示例相当清楚；隐藏

h1、ul、hr的第一个实例和
p
@tavnab的前两个实例如果他有5个p元素，他只想隐藏前2个？我认为做出这样的假设不是一个好计划。@abc123我同意这个问题可以说得更清楚。布兰登，你能提供一个被操纵的实际HTML的例子吗？这个让我困惑
n
是一个数组。那么，
document.getElementsByTagName（n*2）
应该做什么？你的意思是
document.getElementsByTagName（i*2）
？我想你的意思是
document.getElementsByTagName（i[n*2]）
。还有，
i++；i++应为
i+=2var-tagindexs={}；tagindexs['p']=[0，1]；…
），然后在这些键上迭代？这样可以保证任何标记名只处理一次。我想你的意思是
n.length
而不是
elems.length
。对不起，错了，是
n[I*2]
$('h1:eq(0), ul:eq(0), hr:eq(0), p:lt(2)').hide();

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

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