Is it possible to select multiple html elements with same class name with using java script?

Question

I'm trying to create a menu, which have a speciality that the menu contain some icons with each menu title and one button also associated with the menu.when we click on that button every menu titles need to be hidden and only the icons are need to be visible.to achieve this i give a common class name for each menu title and give a java script function. i will give it below.(i'm added the menu and java script function i'm used on below)

   function hideSideMenu() {
        document.getElementById("menu-title").style.display = "none";
    }

     <ul id="leftMenu" class="clearfix">
<li class="topmenu ltopmenu-display-event"><a href="http://qmsadm.local/dashboard"><span class="ico fa fa-fw fa-dashboard                                                           "></span><span id="menu-title" class="menu-title">Dashboard</span></a></li>
<li class="topmenu ltopmenu-display-event"><a href="javascript:void(0)"><span class="ico fa fa-fw fa-globe                                                      "></span><span id="menu-title" class="menu-title">Admin</span><span class="fa  fa-chevron-right spinner-ico"></span></a>
<ul><li><a href="http://qmsadm.local/admin/users"><span class="ico fa fa-fw fa-users                                                               "></span>Users</a></li>
<li><a href="http://qmsadm.local/admin/roles"><span class="ico fa fa-fw fa-user-md                                                             "></span>Roles</a></li>
<li><a href="http://qmsadm.local/admin/menu"><span class="ico fa fa-fw fa-navicon                                                             "></span>Manage Menu</a></li>
<li><a href="http://qmsadm.local/admin/clients"><span class="ico fa fa-fw fa-pagelines                                                           "></span>Clients</a></li>
<li><a href="http://qmsadm.local/admin/templates"><span class="ico fa fa-fw fa-glass                                                               "></span>Templates</a></li>
<li><a href="http://qmsadm.local/admin/devreqs"><span class="ico fa fa-fw fa-cloud-upload                                                        "></span>Device Requests</a></li><li><a href="http://qmsadm.local/admin/devices"><span class="ico fa fa-fw fa-laptop                                                              "></span>Devices</a></li></ul></li><li class="topmenu ltopmenu-display-event"><a href="javascript:void(0)"><span class="ico fa fa-fw fa-puzzle-piece                                               "></span><span id="menu-title" class="menu-title">App</span><span class="fa  fa-chevron-right spinner-ico"></span></a><ul><li><a href="http://qmsadm.local/app/counters"><span class="ico fa fa-fw fa-ticket                                                              "></span>Counters</a></li>
<li><a href="http://qmsadm.local/app/displays"><span class="ico fa fa-fw fa-desktop                                                             "></span>Displays</a></li>
<li><a href="http://qmsadm.local/app/kiosks"><span class="ico fa fa-fw fa-hand-o-up                                                           "></span>Kiosks</a></li>
<li><a href="http://qmsadm.local/app/ads"><span class="ico fa fa-fw fa-film   "></span>Ads</a></li><li><a href="http://qmsadm.local/app/category"><span class="ico fa fa-fw fa-star                                                                "></span>Category</a></li>
<li><a href="http://qmsadm.local/app/subcategory"><span class="ico fa fa-fw fa-star-half                                                           "></span>Sub Category</a></li></ul></li>
<li class="topmenu ltopmenu-display-event"><a href="javascript:void(0)"><span class="ico fa fa-fw fa-pie-chart                                                  "></span><span id="menu-title" class="menu-title">Reports</span><span class="fa  fa-chevron-right spinner-ico"></span></a><ul><li><a href="http://qmsadm.local/reports/token/detail"><span class="ico fa fa-fw fa-th-large                                                      "></span>Token Detail</a></li><li><a href="http://qmsadm.local/reports/token/summary"><span class="ico fa fa-fw fa-envelope-o                                                    "></span>Token Summary</a></li>
<li><a href="http://qmsadm.local/reports/counter/detail"><span class="ico fa fa-fw fa-pencil-square-o                                               "></span>Counter Detail</a></li>
<li><a href="http://qmsadm.local/reports/counter/summary"><span class="ico fa fa-fw fa-briefcase                                                     "></span>Counter Summary</a></li>
<li><a href="http://qmsadm.local/reports/regusers"><span class="ico fa fa-fw fa-dedent                                                              "></span>Registered Users</a></li>
<li><a href="http://qmsadm.local/reports/admin/activities"><span class="ico fa fa-fw fa-clipboard                                                  "></span>Admin Activities</a></li></ul>
</li>
<li class="topmenu ltopmenu-display-event"><a href="javascript:void(0)"><span class="ico fa fa-fw fa-gears                                                      "></span><span id="menu-title" class="menu-title">Settings</span><span class="fa  fa-chevron-right spinner-ico"></span></a><ul><li><a href="http://qmsadm.local/settings/personal"><span class="ico fa fa-fw fa-columns                                                             "></span>Personal</a></li>
<li><a href="http://qmsadm.local/settings/language"><span class="ico fa fa-fw fa-bold                                                                "></span>Language</a></li>
<li><a href="http://qmsadm.local/settings/client"><span class="ico fa fa-fw fa-male                                                                "></span>Client</a></li></ul></li><li class="topmenu ltopmenu-display-event"><a href="javascript:void(0)"><span class="ico fa fa-fw fa-anchor                                                     "></span><span id="menu-title" class="menu-title">Super</span><span class="fa  fa-chevron-right spinner-ico"></span></a>
<ul><li><a href="http://qmsadm.local/super/activities"><span class="ico fa fa-fw fa-pencil                                                              "></span>Activities</a></li></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li>

                </ul>
              </li>
                      </ul>

the problem with this script is that which is work for the first menu item only.i'm new on script ,so you may feel this as funny.is it possible to select all html elements with same class name using java script?.probably that may solve my problem...i don't like to use jquery..

i also tried this

document.getElementsByClassName("menu-title").style.display = "none";

but it's not working for me.

[document.querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll). — steveax, Oct 07 '16 at 05:05
To answer your question. Yes. There is a way to select all the HTML elements by their class name. However it looks like your HTML is mis formatted. — andre mcgruder, Oct 07 '16 at 05:05
What happened when you typed your question title into Google? — nnnnnn, Oct 07 '16 at 05:12
@nnnnn there are too much results ,but with jquery..but i want an answer without jquery — , Oct 07 '16 at 05:14

campino2k · Accepted Answer · 2016-10-07T05:24:53.980

1

You can use document.querySelectorAll('.menu-title') or document.getElementsByClassName("menu-title"), but both return Arrays / Enumerables / Nodecollections. So you need to iterate them.:

var titles = document.querySelectorAll('.menu-title');
for( i in titles ) {
  titles[i].style.display = 'none';
}

The syntax you chose looks very jQuery inspired. In jQuery this would work similar, but jQuery internally maps Arrays and iterates them and applies the actions. Pure JS doesn't do this.

(You could use Array.forEach() as well on the Collection to achieve this)

edited Oct 07 '16 at 05:24

answered Oct 07 '16 at 05:17

campino2k

1,618
1
14
25

Using `.map()` doesn't make sense, given that its purpose is to create a new array. It would *work* (via `.call()`), but `.forEach()` makes more sense. – nnnnnn Oct 07 '16 at 05:22
Good point, thanks, I changed it. – campino2k Oct 07 '16 at 05:23

score 0 · Answer 2 · edited Nov 04 '16 at 19:58

0

Adding a jQuery solution - You can use jQuery each

You can select every li of the menu

$("#leftMenu li.topmenu").each(function(){
    // You'll find selected Object in 'this' variable.
    //  you can add class or do other stuff
    $(this).addClass("activemenu");
})

or you can select every anchor element of the Menu

$("#leftMenu li a").each(function(){
    // You'll find selected Object in 'this' variable.
    //  you can add class or do other stuff
    console.log($(this).attr("href"));
    $(this).parent('li').addClass("activemenu");
})

edited Nov 04 '16 at 19:58

marc_s

732,580
175
1,330
1,459

answered Oct 07 '16 at 05:09

DarkKnight

651
5
15

bro i want an answer without jquery ,that was i mentioned in my question too.tnx for your effort that is why i'm up voted – Oct 07 '16 at 05:11

score 0 · Answer 3 · answered Oct 07 '16 at 05:13

0

Did you try document.getElementsByClassName("menu-title").style.display = "none"; instead of document.getElementById("menu-title").style.display = "none"; ?

answered Oct 07 '16 at 05:13

Lau

179
2
4
13

That wouldn't work. `getElementsByClassName()` returns a list. – nnnnnn Oct 07 '16 at 05:15

Is it possible to select multiple html elements with same class name with using java script?

3 Answers3