Add .click() to each item in a array

Question

I'm trying to .click() all items in an array, how can I do this?
JQuery cant be used.

var information = document.getElementsByClassName("menu-list-element menu-list-element-basic clickable with-icon-left with-icon-right ");

for (i = 10; i < information.length; i++) {
    //.click() all items in the information array
}

What did you try? Also, `var information` is not an Array. It behaves like one though. — putvande, Nov 12 '16 at 19:05
@putvande ive not tried anything yet im completely lost as with how i can do this — A. Seidel, Nov 12 '16 at 19:08

score 5 · Answer 1 · edited May 28 '21 at 12:45

You can use:

var elements = document.getElementsByClassName("class");

for (var i = 0, len = elements.length; i < len; i++) {
  elements[i].click();
}

Working DEMO.

document.getElementById("btn").addEventListener("click", myFunction, false);

function myFunction() {
  var elements = document.getElementsByClassName("example");

  for (var i = 0, len = elements.length; i < len; i++) {
    elements[i].click();
  }
}

.example {
  width: 50px;
  height: 50px;
  background-color: red;
  cursor: pointer;
  margin: 10px;
}

<input type="checkbox" class="example">
<input type="checkbox" class="example">
<input type="checkbox" class="example">
<input type="checkbox" class="example">
<input type="checkbox" class="example">

<button id="btn">
  Simulate click
</button>

P.S. .click() (as you ask) is not the click event but a javascript function that simulates the click event, from MDN:

The HTMLElement.click() method simulates a mouse-click on an element.

If you want to use click as event:

var elements = document.getElementsByClassName("example");

  for (var i = 0, len = elements.length; i < len; i++) {
    elements [i].addEventListener("click", function() {
        /* Do your stuffs here */
    });
  }

Or with Jquery:

Use jquery .each() instead:

$(".class").each(function(){
  $(this).click();
  /* Or for the event */
  $(this).click(function() {
    /* Do your stuffs here */
  });
});

what do you mean by ```/* Do your stuffs here */``` All we want to do is click on the elements, right? Nothing more? — Alexander, May 21 '21 at 13:17

score 2 · Answer 2 · answered Aug 22 '20 at 18:09

You can do the following:

var information = document.getElementsByClassName("...");
var info_items = Array.from(information.children); // Extracts all the child elements and transforms them into an Array

info_items.forEach(item => {
   $(item).click(function() {
      /* 
         Your code for when each item is clicked 
         You can also access data for each item using event.target
      */
   });
});

event.target is a resource from jQuery you can use to access data from the event's target. You can get data like id, className, nodeName, etc.

information.children throwing error. It should be var info_items = Array.from(information); // Extracts all the child elements and transforms them into an Array — Balram Singh, Aug 05 '21 at 06:13

score 0 · Answer 3 · answered Nov 12 '16 at 19:24

You can use querySeletorAll

var elementList = document.querySelectorAll('.class');

It returns a list, so you have to loop through each element in the list and add the event handler:

for (var i = 0; i < elementList.length; i++) {
    elementList[i].addEventListener(".click", function() {
        // handle click
    });
}

Add .click() to each item in a array

3 Answers3