How can i get index use forEach loop?

Question

I've tried to

<ul class="product">
  <li>aaaaa</li>
  <li>bbbbb</li>
  <li class="on">ccccc</li>
  <li>ddddd</li>
</ul>

const product = document.querySelector(".product");
const productList = product.querySelectorAll("li");

function getIdx() {
  productList.forEach((list, idx) => {
    let productClassList = list.classList;
    let parsedList = Array.from(productClassList);

    if (parsedList.includes("on")) {
      return idx;
    }
  });
};

function printIdx() {
  let idx = getIdx();

  console.log(idx); // Print undefined
}

productList.forEach(list => {
  list.addEventListener("click", printIdx);
});

but it is not working, it is always print "undefined" when i click content of li tag

i wanna get index when i click content of li tag and i wanna use that like web shopping site

how can i get index?

your return statement is for the .forEach((list, idx) => { }, not for the function getIdx() — Cid
– Cid, Commented Jun 3, 2021 at 8:45
IF you want to return the index, use a normal for loop: for(let idx = 0; idx < productList.length; idx++) { ... } — adiga
– adiga, Commented Jun 3, 2021 at 8:48
Also, do you want to get the index of on element or index of the clicked element? — adiga
– adiga, Commented Jun 3, 2021 at 8:52

TechySharnav · Accepted Answer · 2021-06-03 08:58:09Z

1

You can simply use a for loop and use classList.contains() to check if the class is present. Also, you need to declare a local var, to store the index returned from the loop.

const product = document.querySelector(".product");
const productList = product.querySelectorAll("li");

function getIdx() {
  let idx;
  for (var i = 0; i < productList.length; i++) {
    let list = productList[i];

    if (list.classList.contains("on")) {
      idx = i;
    }
  }
  return idx;
};

function printIdx() {
  let idx = getIdx();

  console.log(idx);
}

productList.forEach(list => {
  list.addEventListener("click", printIdx);
});

<ul class="product">
  <li>aaaaa</li>
  <li>bbbbb</li>
  <li class="on">ccccc</li>
  <li>ddddd</li>
</ul>

answered Jun 3, 2021 at 8:58

TechySharnav

5,1142 gold badges13 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alpaca Over a year ago

can i put "return" in if statement like "return idx = i;" if i wanna finish for loop quickly?

TechySharnav Over a year ago

@Alpaca just add a break after idx = i line. It will cause to end the loop.

Yair I · Accepted Answer · 2021-06-03 08:54:18Z

1

you just need to save the index outside the foreach loop like this:

const product = document.querySelector(".product");
const productList = product.querySelectorAll("li");

function getIdx() {
  //var for holding the correct index
  let index = -1;
  productList.forEach((list, idx) => {
    let productClassList = list.classList;
    let parsedList = Array.from(productClassList);

    if (parsedList.includes("on")) {
      //put the index we found and exit the loop
      index = idx;
      return;
    }
  });
  //return the value
  return index;
};

function printIdx() {
  let idx = getIdx();

  console.log(idx); // Print undefined
}

productList.forEach(list => {
  list.addEventListener("click", printIdx);
});

<ul class="product">
  <li>aaaaa</li>
  <li>bbbbb</li>
  <li class="on">ccccc</li>
  <li>ddddd</li>
</ul>

answered Jun 3, 2021 at 8:54

Yair I

1,1581 gold badge6 silver badges9 bronze badges

1 Comment

pilchard Over a year ago

You can't exit a forEach() call early

Carsten Massmann · Accepted Answer · 2021-06-03 10:06:01Z

0

Well, a safer way to get all <li>s with the class "on" you could do something like the following:

[...document.querySelectorAll(".product li")]
.reduce((a,li,i)=>{
  li.onclick=()=>console.log(a);
  li.classList.contains("on")&&a.push(i)
  return a
},[]);

<ul class="product">
  <li class="one">this will not be selected</li> 
  <li>bbbbb</li>
  <li class="a on b">this will be selectd</li>
  <li class="on">and this one too!</li>
</ul>

Fun fact: in my .reduce() call I assemble the array a that will only exist in the scope of the callback function as I don't store the return value of the .reduce()-call. But within its scope a will be referenced in the event handler function for each <li>.

edited Jun 3, 2021 at 10:06

answered Jun 3, 2021 at 9:38

Carsten Massmann

28.4k3 gold badges25 silver badges49 bronze badges

Collectives™ on Stack Overflow

How can i get index use forEach loop?

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related