querySelectorAll使用this.element时仅选择第二个元素

Question

I've recently started learning about JavaScript objects, and how frameworks such as jQuery , and Modernizr work.

I have tried to create my own little "framework" , to further learn how JavaScript objects work, and how to utilize them to their full potential.

It's all gone pretty smoothly so far, until I tried to set a global variable using the querySelectorAll() method (and a for loop) , to grab multiple elements with the specified selector.

With this, I intended to add or remove a class from each of those elements with that specific selector. However, it only ever worked on the very last element of the bunch.

---

Here is my (relevant) JavaScript :

var aj = function(sr){
    this.selector = sr || null; // set global selector variable
    this.element = null;
}

aj.prototype.init = function(){
    switch(this.selector[0]){
        // first, second, third case e.t.c...
        default:
            var els = document.querySelectorAll(this.selector); // select all elements with specified selector (set above)
            for(var i = 0; i < els.length; i++){
                this.element = els[i];
            }
    }
};

aj.prototype.class = function(type, classes){
    if(type === "add"){ // if the user wants to add a class
        if((" " + this.element.className + " ").indexOf(" " + classes + " ") < 0){
            this.element.className += " " + classes;
        }
    } else if(type === "remove") { // if the want to remove a class
        var regex = new RegExp("(^| )" + classes + "($| )", "g");

        this.element.className = this.element.className.replace(regex, " ");
    }
};

Example :

<div class="example-class">Example</div>
<div class="example-class">Example 2</div> <!-- only this one will be altered !-->
<script>
    $(".example-class").class("add", "classname");
</script>

Why would this be occurring? My for loop appears to be correct, so I am unsure what is wrong. Apologies if it appears pretty obvious, however, I'm still new to vanilla JavaScript .

All help (and suggestions) is appreciated,
Thanks.

Answer 1

 for(var i = 0; i < els.length; i++){ this.element = els[i]; } 

You have a loop. Each time it goes around the loop it assigns a value to this.element .

The first time it goes around the loop it assigns the value of els[0] . The second time it assigns the value of els[1] .

Since you only have two elements that match, it reaches the end of the loop and stops.

At this point, this.element is still equal to els[1] .

---

If you want to do something (like add membership of a class) to each item in els then you have to loop over els at the time you modify className .