For Statement Breaking the Loop

Question

I don't know if anyone would notice if I edit my previous post so I'm here now to post a new one.

I have this code

$(document) .ready(function(){
    var a;
    var b;
    var c;
    var d;
    var pmmain =["Citrix", "Coach", "Disney", "Edison", "Eversource", "Fedex", "General Dynamics", "Hertz", "Kimco", "Nabors", "Starbucks", "Timewarner", "TW Telecom", "Weatherford", "Western Union", "Zoetis"];
            $("#mains") .one("click",function(){
    c=0;
    d=c+4;
    a=4;
    b=0;

    for (a=c; a<d; a++){
    $("#pm-page-main") .append("<div class=\"main-box\"><div class=\"title-box\"><span class=\"reg-wht-bold\">"+pmmain[a]+"</span></div><BR><BR><img src=\"imgs\\"+pmmain[a]+".png\"></div>");
    }
    });
       $("#next-four").click(function() {

                 b=a;
                 d = b +4;
                $("#pm-page-main") .html(""); 
        for (b=a; b < d; b++) {
          if(b != 16){

                $("#pm-page-main") .append("<div class=\"main-box\"><div class=\"title-box\"><span         class=\"reg-wht-bold\">" + pmmain[b] + "</span></div><BR><BR><img src=\"imgs\\" + pmmain[b] + ".png\"></div>"+b+"").hide().show();
            }
             else{
        a=0;
        }}

                a = a+4;

    });

Code that I've added:

    $("#last-four").click(function() {

         b = (a)<pmmain.length?a:0;
    a = b;  // just in case if b is reset to 0
    d=b-8;


        $("#pm-page-main") .html(""); 

for (b=a; b-4 > d; d++) {


        $("#pm-page-main") .append(d+"<div class=\"main-box\"><div class=\"title-box\"><span class=\"reg-wht-bold\">" + pmmain[d] + "</span></div><BR><BR><img src=\"imgs\\" + pmmain[d] + ".png\"></div>").hide().fadeIn(75);
   }

        a = a-4;
    });
    });

It's working as it should. It is a menu that shows 4 items at a time. The problem in here is that the for statement doesn't stop looping even when it reaches the end of the array. I tried to put an if statement inside the for loop but to no avail.

My question is how can I stop the for loop when it reaches the end of the array? Or is there a way to get back to the first 4 items. And is there any better way to approach this? I have read about .each in Jquery but i have no idea on how to use it.

UPDATE: I only paste the html where the code is needed.

    <div id="pm-page">
    <div id="top-left">
    <span class="title">PAGEMAKEUP Section</span>
    </div>

    <div id="top-right">
    <button class="btn-home">Home</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button class="btn-akbar">akbar</button>
    </div><BR>
    <h1 class="line-blank"><span></span></h1>
    <!--<div class="bar"></div>-->
    <div id="pm-body">
    <div class="pm-page-menu">
    <button id="mains">STYLE TEMPLATES</button>
    <button id="next-four">OVERPRINT VS KNOCKOUT</button>
    <button>CREATING CUSTOM QR CODE</button>
    <button>PM FILE MANAGER</button>
    </div>

    <div id="pm-page-main">

    </div>
    </div>
    </div>

2nd UPDATED: Hi I hope someone would see this. I have updated the javascript codes and is now looping back to 0. The problem that I can't solve now is that when b is equal to 16, a should reset to 0 so that it would show the first 4 items again. But the problem is that when I click the button again (after the last value in the array), it does not go back to 0 but instead shows an undefined 17,18,19. When I click again, the items 0,1,2 and 3 are skipped and the program jumps to 4,5,6,7 immediately. As of the moment Im still trying to figure it out. Any help would be much appreciated.

3rd UPDATE: Is anyone seeing this? I've inserted a few lines in. It's a new button wherein it will show the previous 4 items. It's working fine except if I'm at the first four items. When I click the button, negative number comes up. I want it to get to 12-15 but my head is spinning on how to come up with that logic. any help?

for future reference, editing a post does bump it, so it would have been noticed — andrew, Sep 01 '15 at 14:54
My answer to your previous question -- you would do well to provide a link to it -- provided for just that. Once the array is exhausted the loop does not continue. Please take a look at it first. — PeterKA, Sep 01 '15 at 14:55
I guess you defined but did not initialize your variables inside the `#next-four` block, `a` can have any value if not initialized. — Onilol, Sep 01 '15 at 14:57
Since c is starting at 0, the loop is running 5 times, not 4. Could be one of your issues there. — Andrew Ice, Sep 01 '15 at 14:57
I will try to answer all in this comment. Basically what the 2nd loop does is go to the next four items and so on. — Selim, Sep 01 '15 at 15:00
You should a console.log(b) to your loop, and see if the b variable is incrementing correctly. — Andrew Ice, Sep 01 '15 at 15:06
@AndrewIce thing is he didn't initialize the variables.. it could be any value. — Onilol, Sep 01 '15 at 15:06
Take a look at this: http://stackoverflow.com/questions/32316665/return-x-items-of-an-array-at-a-time/32317405#32317405 — PeterKA, Sep 01 '15 at 15:12
I didn't expect a lot of comments. I need to review and take into account all the things that were said in here. As of now, adding another condition in the loop works but I am still going to review the rest of the answers and comments. Thanks! — Selim, Sep 01 '15 at 15:26

score 1 · Answer 1 · answered Sep 01 '15 at 15:04

1

One way to answer your question is yes there is a way to break a loop.

for (b = a; b < d; b++) {
  if(b < d){
    //run equation
  }else{
    break;
  }
}

This will stop the loop where it's at. It's not the safest approach but it should fix your problem.

answered Sep 01 '15 at 15:04

Andrew Ice

831
4
16

when 'for' statement itself checks for the condition b – Naren Neelamegam Sep 01 '15 at 22:39

score 1 · Answer 2 · answered Sep 01 '15 at 15:10

1

For Loop break,

 loop:
 for (b = a; b < d; b++) {
 if(b < d){
     //your statement
    }else{
     break loop;
    }
  }

answered Sep 01 '15 at 15:10

Nilesh Mistry

339
2
13

Same difference as my answer. The tag name is not necessary. – Andrew Ice Sep 01 '15 at 15:13

Naren Neelamegam · Accepted Answer · 2015-09-01T15:59:28.870

Your "next-four" for loop looks alright except the return statement in it

return (b == pmmain.length);

I don't know why you have it inside, but that is the one making you think that your for look is not stopping, actually it does. Let me explain it clearly.

Let us say while clicking 'next-four' div element, your code executes as below

b = a; //let us say 'a' is 4 and so as 'b' ie. b=4
d = b + 4; // d = 4 + 4 ==> d=8

for(b=a; b<d; b++)  // now b value is again set to 4 and run loop until b<8
{
     $("pm-page-main").append("<div..."> + pmmain[b] + "<...>"); // element added pmmain[4]= 'eee'
     return (b== pmmain.length); // this will break the loop right away
}
a = a+4; // you will never reach here because of return statement in the loop

As explained above, your return statement will break the for loop and function right away and moreover, it will return false to your click function call as b == pmmain.length ie., 4 == 16 always will be false. [Just a note- return false will prevent the default action of that event - nothing to worry in your function anyways]

Your for loop gets executed only once and returns back (ends the whole function).

And answer for your other question of going back to first 4 items on your array, probably try changing this line of code like below,

b = a;
d= b+4;

to

b = (a+4)<pmmain.length?a:0;
a = b;  // just in case if b is reset to 0
d=b+4;

This assigns b value depends on your array length and current pointer ('a' value). If your loop cannot run till end of your array, then b will get 0, so you will start from your array's first value.

Thanks for accepting the answer. I hope you are not asking about ternary (conditional) operator!!! If yes, please search internet for what it is. Ternary is just ?:; . or if you can't understand what that line of code does, it checks whether 'b' can start with current value of 'a', else it will set it to 0 to start from beginning of the array. For eg: if 'a' is 11 then 'b' will get 'a' value and 'd' will be b+4=15, if 'a' is 15, then b will get 0, and a will also be set to 0 (line 2), d=b+4=4. That line manages to reset b to 0 if it is end of array. — Naren Neelamegam, Sep 01 '15 at 21:52
I thought that it's really the thing that causing "b" to reset to 0. What if I wanted to reverse it? For example, I created another button that would show the previous 4. So if you're b=4, when you click this new button, it should show 11-15. I hope you are understanding this. lol — Selim, Sep 02 '15 at 14:38

score 0 · Answer 4 · answered Sep 01 '15 at 14:56

0

Add another condition in your loops, so that they end when you reach the end of the array:

for (a = c; a < d && a < pmmain.length; a++) {

and

for (b = a; b < d && b < pmmain.length; b++) {

answered Sep 01 '15 at 14:56

Guffa

687,336
108
737
1,005

For Statement Breaking the Loop

4 Answers4