如何解决遍历元素数组并添加类
var elements = [ '#element1','#element2' ];
$( elements ).each(function() {
$( this ).addClass( "myClass" );
});
什么都没发生。我究竟做错了什么?元素存在。我没有收到错误消息。
解决方法
jQuery对象仅接受数组中的Element对象数组。这样,您可以将数组修改为包含Element对象,如下所示:
var elements = [document.querySelector('#element1'),document.querySelector('#element2')];
$(elements).addClass("myClass");
.myClass { color: #C00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="element1">Element1</div>
<div id="element2">Element2</div>
这显然不是理想的,因为它比必要的更为冗长,而且很多余。
另一种选择是从示例中的字符串数组构建有效的选择器字符串。可以使用join()
:
var elements = ['#element1','#element2'];
$(elements.join(',')).addClass("myClass");
.myClass { color: #C00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="element1">Element1</div>
<div id="element2">Element2</div>
请注意,无论哪种情况,都不需要显式的each()
循环;大多数jQuery方法都会隐式地循环遍历jQuery对象中的每个元素,就像addClass()
一样。
.each()
方法用于循环遍历jQuery集合。要遍历普通数组,请使用$.each()
函数。
var elements = ['#element1','#element2'];
$.each(elements,function(i,selector) {
$(selector).addClass("myclass");
});
.myclass {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='element1'>Div1</div>
<div id='element2'>Div2</div>
,
多个选择器必须用,
分隔,而不是数组中的字符串。
var elements = '#element1,#element2';
$( elements ).each(function() {
$(this).addClass( "myClass" );
});
.myClass { background: yellow; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='element1'>Div1</div>
<div id='element2'>Div2</div>
,
您正在遍历选择器数组,而不是元素。 jQuery将使用字符串选择器作为上下文调用每个迭代。但是它将被自动装箱到String
对象中。您可以通过调用toString
将其转换回原始字符串。
或者使用第二个参数代替this
$(elements).each(function(_,selector) {
$(selector).addClass( "myClass" );
});
var elements = ['#element1','#element2'];
$(elements).each(function() {
console.log(typeof this,this instanceof String); // object true
$(this.toString()).addClass( "myClass" );
});
.myClass { background: yellow; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='element1'>Div1</div>
<div id='element2'>Div2</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。