是否可以使用 java 脚本选择具有相同类名的多个 html 元素？ [复制]

Question

我正在尝试创建一个菜单，其特点是菜单包含一些图标，每个菜单标题和一个按钮也与菜单相关联。当我们单击该按钮时，每个菜单标题都需要隐藏 并且只需要显示图标。为了实现这一点，我为每个菜单标题提供了一个通用类名并提供了一个 java 脚本函数。我会在下面给出它。（我添加了我在下面使用的菜单和java脚本功能）

   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>

这个脚本的问题是它只适用于第一个菜单项。我是脚本新手，所以你可能会觉得这很有趣。是否可以使用 java 脚本选择具有相同类名的所有 html 元素?.可能这可以解决我的问题...我不喜欢使用 jquery ..

我也试过了

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

但它不适合我。

Answer 1

添加 jQuery 解决方案 - 您可以使用 jQuery each

你可以选择菜单的每一行

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

或者您可以选择菜单的每个锚元素

$("#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");
})

Answer 2

您可以使用 document.querySelectorAll('.menu-title') 或 document.getElementsByClassName("menu-title")，但两者都返回 Arrays / Enumerables / Nodecollections。所以你需要迭代它们。：

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

您选择的语法看起来非常受 jQuery 启发。在 jQuery 中，这将类似地工作，但 jQuery 在内部映射数组并迭代它们并应用操作。纯 JS 不会这样做。

（您也可以在 Collection 上使用 Array.forEach() 来实现此目的）

Answer 3

您是否尝试过document.getElementsByClassName("menu-title").style.display = "none"; 而不是document.getElementById("menu-title").style.display = "none";？