遍历元素数组并添加类

问题描述

我试图遍历元素数组并为每个元素添加一个类。

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>