How to map function on each element with css class in javascript

Question

I'm rewriting some stuff which I created with jQuery to vanilla JS. I can't find vanilla JS equivalent for mapping my function to all elements with specified CSS class. For example I have function for slider, in jQuery I'm mapping it like this:

(function($) {

    $.fn.slider = function() {
        this.each(function() {
            // Do some stuff
        });
    };

    $('.slider').slider();

}(jQuery));

What is the propper way to do it in vanilla JS?

You can choose document.querySelectorAll or document.getElementsByClassName, but the latter returns a HTMLCollection so it will not allow you to use NodeList.prototype.forEach(). — soupy-norman
– soupy-norman, Commented Nov 14, 2022 at 9:26
You might not need jQuery has a useful list of vanilla JS alternatives for jQuery functions — StackByMe
– StackByMe, Commented Nov 14, 2022 at 11:38

Peter Seliger · Accepted Answer · 2022-11-14 12:10:04Z

1

Implement e.g. a function initializeSlider which accepts an element-node parameter and do whatever has to be done with such a node.

Query a NodeList of all .slider classified element-nodes via e.g. querySelectorAll and execute the slider related function forEach of the node-list's node-items.

                                      // (function($) {
                                      //
                                      //   $.fn.slider = function() {
function initializeSlider(elmNode) {  //     this.each(function() {
  // Do some stuff with/to `elmNode`  //       // Do some stuff
}                                     //     });
document                              //   };
  .querySelectorAll('.slider')        //
  .forEach(initializeSlider);         //   $('.slider').slider();
                                      //
                                      // }(jQuery));

edited Nov 14, 2022 at 12:10

answered Nov 14, 2022 at 11:36

Peter Seliger

13.5k3 gold badges31 silver badges45 bronze badges

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

Collectives™ on Stack Overflow

How to map function on each element with css class in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related