循环遍历元素数组并添加 Class

Question

我正在尝试遍历元素数组并向每个元素添加一个 class。

var elements = [ '#element1', '#element2' ];

$( elements ).each(function() {
  $( this ).addClass( "myClass" );
});

没有任何反应。我究竟做错了什么？元素存在。我没有收到任何错误消息。

Answer 1

jQuery objects 只接受数组中的 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() 此处所做的那样。

Answer 2

多个选择器必须用 , 分隔，而不是作为数组中的字符串。

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>

Answer 3

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

Answer 4

您正在循环选择器数组，而不是元素。 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>

循环遍历元素数组并添加 Class

Looping Through an Array of Elements and Adding a Class

jquery

loops

each