循环遍历一个元素数组并添加一个类答案

【问题标题】：Looping Through an Array of Elements and Adding a Class循环遍历一个元素数组并添加一个类
【发布时间】：2020-12-22 01:37:45
【问题描述】：

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

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

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

什么都没有发生。我究竟做错了什么？元素存在。我没有收到错误消息。

【问题讨论】：

标签： jquery loops each

【解决方案1】：

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() 在这里所做的那样。

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

这个答案对于我的用例来说是更直接的实现。谢谢巴尔玛！

【解决方案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>

【讨论】：