对于数组的每个元素做某事在数组中指定答案

【问题标题】：for each element of array do sth specified in an array对于数组的每个元素做某事在数组中指定
【发布时间】：2020-07-08 19:16:37
【问题描述】：

我目前想知道以下几点：我有两个数组：

const highlightClasses = ['highlightPlace', 'highlightOrg', 'highlightName'];
const elements =['place', 'org', 'name']

还有一个“toggleClass-function”可以神奇地切换类：

const toggle = (element, className) => $(element).toggleClass(className);

elements 包含我想从 highlightClasses 切换类的所有元素。

我目前的解决方案是这样的：

const highlightEntities=() => {
    toggle($('place'), 'highlightedPlace');
    toggle($('org'), 'highlightedOrg');
    toggle($('name'), 'highligtedName');
}

我在想某事

for each (element in elements){
do magic 
}

我希望元素[0] 的 highlightClasses[0] 被切换等等。（在这种情况下）另外，就这三个元素和类，不知道是不是真的值得花时间，但万一我不得不扩展它，我想知道一个更优雅的方式

有这样的方法吗？

【问题讨论】：

你也可以做不同的事情，只为 body 元素切换一个类。您将调整您的 CSS 选择器，使 .highlightedPlace 变为 body.highlighted .place 然后您只需更改 body 上的类，其他所有内容都会适应它。
只要你看起来在使用 jQuery，你可以做$.each(elements, (element, idx) => $(element).toggleClass(highlightClasses[idx]))
toggle() 是这个函数的一个糟糕的名字，因为 jQuery toggle() 做了一些不同的事情（隐藏/显示）
我可能应该将其重命名为 toggleClasses 或 sth。类似:-) @YevgenGorbunkov 我正在使用 jquery，这个答案是否需要我调整我的数据结构？（下面回答）

标签： javascript dom-manipulation

【解决方案1】：

试试这样的：

for (let i = 0; i < elements.length; i++) {
  toggle($(elements[i]), highlightClasses[i]);
}

另外我会推荐这样的数据结构：

const elements = [
  { name: 'place', highlightClass: 'highlightPlace' },
  { name: 'org', highlightClass: 'highlightOrg' },
  { name: 'name', highlightClass: 'highlightName' }
]

相应的更简单的 for-in 循环是：

for (const element in elements) {
  toggle($(element.name), element.highlightClass);
}

这样，当您的数组长度不同时，您就不会遇到错误。

【讨论】：

我建议使用forEach 而不是for，这样会更干净。由于这个问题很简单，我会让 OP 无需了解索引，因为它们是大多数语言中循环的核心部分，他最终会做到这一点。
更好：elements.forEach(function(elem){toggle($(elem.name), elem.highlightClass);});
谢谢大家。我有一个不起作用的 forEach 函数，但这可能是由于我的（以前的）数据结构（两个数组而不是对象数组）我根本没想过重新排列我的数据......