Any better way to hide multiple elements at once?

Question

This works perfectly fine, but for future reference I would like to know if there is a better way to do this.

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

I'm open to using jQuery if it would help.

Answer 1

虽然没有特别要求jQuery，但是完全按照书面形式来满足OP的示例代码是最短的实现：

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

Answer 2

Keep your nodes in an Array , then you can write some functions which will hide or show a whole Array (or NodeList ) at once, eg

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

So you have

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

Now can simply do

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

Answer 3

Here's a pure Javascript option that implements a jQuery-like extension for the :lt(n) pseudo selector so you can specify however many of each tag you want.

As the question asked, this operates on the first two "p" tags, then the first "h1" , "ul" and "hr" tags:

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

Working demo: 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';   
}

---

Code Specifically for you

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

Answer 5

Here's the code ( 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++;
}