javascript - Weird Behavior when eq() is followed by attr() -

I was trying to create a button with jQuery that fade all target devices one by one and then He used to fade again. . I know that I have to fulfill the same thing. (And) loop, but as I mentioned, I am trying to understand this part of jQuery.

This code is

  var divCount = $ ('. Box'). Length; Var counter = 0; Click $ ('.button') (function () {var divAttr = $ ('. Box'). Eq (counter) .attr ('class'); if (divAttr! == 'hidden' & amp; Counter> = 0 & amp; counter & lt; = divCount) {$ ('.box'). Eq (counter) .attr ('class', 'hidden'); $ ('. Box'). Eq (Counter), css ('background', 'gray'); $ ('. Box'). Eq (counter) .css ('border', '1px solid black'); counter ++;}  

And here's my problem, this line of code is:

  $ ('. Box'). Eq (counter) .attr ('class',' Hidden ');  

If this is active then the script only / other devices I know that I can use .addClass instead, I tried to do it and worked properly. But I understand what I am losing?

html, css and js file can be found here

$ ('. Box'). Eq (counter) .attr ('class', 'hidden'), , you are modified element you delete < / Em> to class a 'hidden' .

As such, when you $ ('. Box') Eq (counter) On the next line, it will return an different element because $ ('. Box') now contains a lower element.