Im trying to implement multilanguage support to a website and for that I need to select all elements that have class="lang" attribute. This is how my Js code looks like

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

And this is the html code where Im trying to test this out

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

Im confused about jquery selectors and actually dont know how to use them well. Any help will be appreciated

Im trying to implement multilanguage support to a website and for that I need to select all elements that have class="lang" attribute. This is how my Js code looks like

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

And this is the html code where Im trying to test this out

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

Im confused about jquery selectors and actually dont know how to use them well. Any help will be appreciated

• javascript
• jquery

• Don't make up your own attributes. Use data-key instead of key. – Barmar Commented May 9, 2017 at 21:21
• I don't see any difference between the code that works and the code that doesn't work. The only difference is that one runs when the page is first loaded, the other runs when when you click on something. – Barmar Commented May 9, 2017 at 21:22
• I remend you move that similar code into a separate function, so you don't have to write it twice. – Barmar Commented May 9, 2017 at 21:23
• @Barmar I know its the same thats why I dont get why it isnt working – Sebastian Ampuero Morisaki Commented May 9, 2017 at 21:29
• 1 Are you loading the HTML dynamically? Maybe it's not loaded yet when the first code runs. Is language set in localStorage? – Barmar Commented May 9, 2017 at 21:31

2 Answers 2

To get all elements with the specified class name, Try document.getElementsByClassName:-

var x = document.getElementsByClassName("className");

The getElementsByClassName() method is not supported in Internet Explorer 8 and earlier versions.

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.

This should do the trick:

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