for each element of array do sth specified in an array

Question

I am currently wondering the following: I have two arrays:

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

and a "toggleClass-function" which does magically toggle classes:

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

elements contains all elements that I want to toggle the class from highlightClasses.

my current solution is this:

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

I was thinking about sth like a

for each (element in elements){
do magic 
}

I want for elements[0] the highlightClasses[0] to be toggled and so on. (in this case) Besides, it is only these three elements and classes, I do not know whether it actually is worth the time, but in case I have to expand it, I'd like to know a more elegant way

is there such a way?

You could also do it differently and only toggle a class for the body element. You'd adapt your CSS selectors such that .highlightedPlace becomes body.highlighted .place Then you only have to change the class on the body and everything else adapts to it. — casenonsensitive, Jul 08 '20 at 10:58
As long as you seem to be using jQuery, you may do `$.each(elements, (element, idx) => $(element).toggleClass(highlightClasses[idx]))` — Yevhen Horbunkov, Jul 08 '20 at 11:01
`toggle()` is a poor name for this function since jQuery `toggle()` does something different (hide/show) — charlietfl, Jul 08 '20 at 11:04
I should probably rename it to toggleClasses or sth. similar :-) @YevgenGorbunkov I am using jquery, does this answer need me to adjust my data structure? (answer below) — , Jul 08 '20 at 11:11

ElBullet · Accepted Answer · 2020-07-08T11:16:37.090

2

Try something like this:

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

Also I would recommend a data structure like this:

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

The more simple for-in loop would accordingly be:

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

This way you won't run into errors when your Arrays have different lengths.

edited Jul 08 '20 at 11:16

answered Jul 08 '20 at 10:56

ElBullet

46
1
5

I would suggest using `forEach` rather than `for`, it makes it cleaner. As this question is quite simple, I would spare OP the need to understand indexes, as they are a core part of loops in most languages and he will eventually get to that. – feedy Jul 08 '20 at 10:58
2

better: elements.forEach(function(elem){toggle($(elem.name), elem.highlightClass);}); – ddfra Jul 08 '20 at 11:01
Thank all of you. I had a forEach-function that didn't work but that might be due to my (former) data structure (two arrays instead of an array of objects) I simply did not think of rearranging my data ... – Jul 08 '20 at 11:07

for each element of array do sth specified in an array

1 Answers1