javascript - select multiple elements by ID in one line

I would like to know if there is a better/cleaner way to accomplish what I have in the code below.

var updateJob = function(){
    document.getElementById("jobDescription").style.display = "block";
    document.getElementById("updateButton").style.display = "block";
    document.getElementById("equipmentList").style.display = "block";
    document.getElementById("jobDesc").style.display = "block";
    document.getElementById("equipRan").style.display = "block";
}

I would like to have just one line that will unhide all of the elements if its possible I have tried document.getElementById("jobDescription" + "updateButton" + etc...).style.display = "block"; but it does not work. I am new to JavaScript.

I would like to know if there is a better/cleaner way to accomplish what I have in the code below.

var updateJob = function(){
    document.getElementById("jobDescription").style.display = "block";
    document.getElementById("updateButton").style.display = "block";
    document.getElementById("equipmentList").style.display = "block";
    document.getElementById("jobDesc").style.display = "block";
    document.getElementById("equipRan").style.display = "block";
}

Share Improve this question asked Dec 31, 2012 at 1:46 Yamaha32088 4,16310 gold badges53 silver badges104 bronze badges

2 You should seriously look into jQuery. – Joseph Silber Commented Dec 31, 2012 at 1:47
Or use document.querySelectorAll if you're targeting modern browsers (though you'd still have to loop through them). – Joseph Silber Commented Dec 31, 2012 at 1:48
Add a CSS class to the elements and then toggle them all by class – scunliffe Commented Dec 31, 2012 at 1:48

Add a comment |

5 Answers 5

Sorted by: Reset to default 9

Give all your required elements a class and select them through getElementsByClassName(..).

(and maybe use jQuery to do the same thing with much less pain)

You could use a loop:

var elements = ['jobDescription', 'updateButton', 'equipmentList', 'jobDesc', 'equipRan'];

for(i = 0; i < elements.length; i++) {
   document.getElementById(elements[i]).style.display = "block";
}

Try this and I am sure it will work in all modern browsers:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>For Loop Element</title>
</head>
<body>

    <div id="divOne">

        <p id="paraOne">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        <p id="paraTwo">Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
        <p id="paraTre">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

    </div>

    <div id="divTwo">Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</div>


    <script>
            var allElem = document.querySelectorAll('#divOne, #paraOne, #paraTwo, #paraTre,#divTwo');
            console.log(allElem);

            for(var i = 0; i < allElem.length; i += 1)
            {
                allElem[i].style.border= '1px solid #002D55';
            }
    </script>
</body>
</html>

Try this:

var toggle = ["jobDescription","updateButton","equipmentList","jobDesc","equipRan"],
    l = toggle.length, i;
for( i=0; i<l; i++) document.getElementById(toggle[i]).style.display = "block";

Alternatively, put all those elements in one container and just toggle that.

This is not something that can be done in one line. However, with jQuery it's possible to give the elements a class and manipulate its style with a nifty jQuery method. But as for pure JS you can use an array of strings (the ids), iterate it and set the style of the elements with those ids.

[ 'jobDescription', 'updateButton', 'equipmentList',
  'jobDesc', 'equipRan' ].forEach(function( iden ) {

    document.getElementById( iden ).style.display = "block";

});

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - select multiple elements by ID in one line - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)