Javascript 如何选择DOM中具有相同类的所有元素?
我正在尝试对网站实施多语言支持,为此我需要选择所有具有Javascript 如何选择DOM中具有相同类的所有元素?,javascript,jquery,Javascript,Jquery,我正在尝试对网站实施多语言支持,为此我需要选择所有具有class=“lang”属性的元素。这就是我的Js代码的样子 $(function(){ var language = localStorage.getItem('language'); if(language !== null){ //this does not work $(document).find('.lang').each(function (index, element) {
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选择器感到困惑,实际上不知道如何很好地使用它们。任何帮助都将不胜感激这应该可以做到:
$(".lang").each(function() {
const $lang = $(this);
// translate this item's text
});
要获取具有指定类名的所有元素,请尝试:-
var x=document.getElementsByClassName(“className”)代码>
Internet Explorer 8和早期版本不支持GetElementsByCassName()
方法
函数myFunction(){
var x=document.getElementsByClassName(“示例”);
x[0]。innerHTML=“你好,世界!”;
x[1].innerHTML=“我的第一个代码段”
}
带有class=“example”的第一个div元素。
带有class=“example”的第二个div元素。
试试看
@SebastianAmpueroMorisaki它怎么不起作用?它应该在最后用class=“lang”选择所有元素。@epascarello它没有显示任何内容,我尝试使用GetElementsByCassName,这是唯一对我有效的方法,但我不想这样做。如果添加JSFIDLE会更好(:如果您使用而不是链接到外部站点,那就更好了。不要构建您自己的属性。使用数据键而不是键。我看不出有效的代码和无效的代码之间有什么区别。唯一的区别是,第一次加载页面时,一个运行,另一个在你点击一些东西。我建议你将类似的代码移动到一个单独的函数中,这样你就不必再写两次了。@Barmar我知道这是一样的,这就是为什么我不明白为什么它不能工作。你动态加载HTML吗?也许在第一个代码运行时它还没有加载。语言是否在localStorage
中设置?