Jquery click event causing loop to execute only one time

Question

I want to show next five divs each time when i click show more button, 5 divs will be shown default when load, here is my code,

var counterBox = 5;
$("#show_more_location").click(function() {
    $(".loading-container").show();
    for (var inc = 5; inc <= 5; inc++) {
        if(counterBox<50){
            counterBox = counterBox + 1;
            $(".location-box:nth-child("+counterBox+")").slideDown().addClass("show_box").delay(100);
        }  
    }
    $(".loading-container").delay(5000).hide();         
});

Problem is that when I click show more button, it loops only once, and stops. Only one div is showing ,I want to show 5 divs on show buttonclick.

Can anyonehelp?

If your loop counter starts with the value 5, then don’t expect it to be lesser than or equal 5 after you added a positive value to 5 ... — C3roe
– C3roe, Commented Aug 28, 2017 at 13:03
thnx @CBroe, its because of lot of work, just initialize inc = 0, it works fine, thnx again — Muhammad Akber Khan
– Muhammad Akber Khan, Commented Aug 28, 2017 at 13:08
and one more thing is loading div is not showing/hide, its executing very fast, i have also add delay of 5 sec but loading is not showing — Muhammad Akber Khan
– Muhammad Akber Khan, Commented Aug 28, 2017 at 13:13

Koby Douek · Accepted Answer · 2017-08-28 13:06:05Z

3

It seems you init your inc iterator with 5, and get out of the loop when it's higher than 5:

for (var inc = 5; inc <= 5; inc++) {
   ...
}

Try initializing it with 1:

for (var inc = 1; inc <= 5; inc++) {
   ...
}

edited Aug 28, 2017 at 13:06

Koby Douek

16.7k21 gold badges79 silver badges110 bronze badges

answered Aug 28, 2017 at 13:03

OddBrew

4983 silver badges16 bronze badges

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

2 Comments

Muhammad Akber Khan Over a year ago

but one more point can you help, loading div is not showing, as i have also add the delay in hide, check my question, i have update

OddBrew Over a year ago

@MuhammadAkberKhan did you try with the function setTimeOut() instead ? Check out its usage here w3schools.com/jsref/met_win_settimeout.asp

Paul de Koning · Accepted Answer · 2017-08-28 13:03:13Z

0

You're setting inc in the for loop to 5, then checking if it is lower than or is 5. So it runs once. Make inc 0 to run it 6 times.

answered Aug 28, 2017 at 13:03

Paul de Koning

5421 gold badge6 silver badges16 bronze badges

Collectives™ on Stack Overflow

Jquery click event causing loop to execute only one time

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related