一次隐藏多个元素的任何更好方法

Any better way to hide multiple elements at once?

本文关键字：元素 任何 更好 方法 一次 隐藏      更新时间：2023-09-26

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

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。

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

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

将节点保留在数组中，然后您可以编写一些函数来一次隐藏或显示整个数组（或 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

这是一个纯 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/

使用纯 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';   
}

这是代码（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++;
}
相关文章：