如何选择DOM中具有相同类的所有元素？

Question

我正在尝试为网站实现多语言支持，为此我需要选择所有具有class="lang"属性的元素。这是我的Js代码：

$(function(){
    var language = localStorage.getItem('language');
    if(language !== null){
        //this does not work
        $(document).find('.lang').each(function (index, element) {
            if($(this).attr('placeholder')!=null){
                //change placeholder text
            }
            $(this).text(arrLang[language][$(this).attr('key')]);
        });
    }

    //this works
    $(document).on('click','.translate',function () {
        var lang = $(this).attr('id');
        $(document).find('.lang').each(function (index, element) {
            if($(this).attr('placeholder')!=null){
                //change placeholder text
            }
            $(this).text(arrLang[lang][$(this).attr('key')]);
            localStorage.setItem('language',lang);
        });
    });
});

这是我要测试的 HTML 代码：

<div class="navbar navbar-default navbar-static-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <div class="navbar-brand">
                <img alt="brand" src="../img/th-logo.png" height="25px" width="60px" href="Startsite.jsp">
            </div>
        </div>
        <div class="navbar-brand">Studienlaufplan </div>
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <div class="collapse navbar-collapse navHeaderCollapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="../Startsite.jsp" class="lang" key="tasks" >Aufgaben</a> </li>
                <li><a href="../Account.jsp" class="lang" key="account" >Konto</a> </li>
                <li><a href="Canal.jsp" class="lang" key="cannals">Kanäle</a> </li>
                <li><a href="Settings.jsp" class="lang" key="settings">Einstellugen</a> </li>
                <li class="dropdown">
                    <a href="#" class="lang dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" key="language">Sprache</a>
                    <ul class="dropdown-menu">
                        <li><a href="#" class="translate" id="de">Deutsch</a></li>
                        <li><a href="#" class="translate" id="en">English</a></li>
                    </ul>
                </li>
                <li><a href="/Controller/Logout" class="lang" key="logout">Abmelden</a></li>
            </ul>
        </div>
    </div>
</div>

我对jQuery选择器感到困惑，实际上也不太会很好地使用它们。任何帮助都将不胜感激。

- Sebastian Ampuero Morisaki

---

不要自己创造属性。请使用 data-key 代替 key。 - Barmar

我看不出代码正确运行和错误运行的区别，唯一的区别是一个在页面首次加载时运行，另一个是在点击某个东西时运行。 - Barmar

@Barmar 我知道它是一样的，所以我不明白为什么它不起作用。 - Sebastian Ampuero Morisaki

你是动态加载HTML吗？也许当第一段代码运行时它还没有被加载。语言设置在localStorage中吗？ - Barmar

你尝试在浏览器的调试控制台中逐步执行，查看它在哪里出现了问题了吗？ - Barmar

Answer 1

要获取所有指定类名的元素，请尝试使用 document.getElementsByClassName 方法： var x = document.getElementsByClassName("className"); 在 Internet Explorer 8 及更早版本中不支持 getElementsByClassName() 方法。

function myFunction() {
  var x = document.getElementsByClassName("example");
  x[0].innerHTML = "Hello World!";
  x[1].innerHTML = "my first code snippet"
}

<div class="example">First div element with class="example".</div>

<div class="example">Second div element with class="example".</div>

<button onclick="myFunction()">Try it</button>

try it yourself here.

- optimistanoop

---

最好加上JSFiddle (: - Sebastián Palma

最好使用Stack Snippet，而不是链接到外部网站。 - Barmar

Answer 2

这应该可以解决问题：

$(".lang").each(function() {
    const $lang = $(this);
    // translate this item's text
});

- Solomon

---

@SebastianAmpueroMorisaki，为什么它不起作用？它应该选择所有类为“lang”的元素。 - epascarello

你忘了在结尾处加上 )。 - Sebastián Palma

@epascarello 它什么也没显示，我尝试使用 getElementsByClassName，那是唯一对我有用的东西，但那不是我想要做的方式。 - Sebastian Ampuero Morisaki