Making a counting sum in jQuery each

Question

How can I count in a jQuery each function?

<script>
    ajax();
    function ajax(){
        $.ajax({
            url:"ChinaWeather.json",
            dataType:"json",
            success: function(data){
                $.each(data, function(index, item){ 
                    var sum = 1;
                    $('#countryweatherwrap').append('<div id="countryweather' + sum + '">' + data[index].season + 'Temperatuur: ' +
                        data[index].temperature+' °C <br />' + '<div style="height:'+ data[index].temperature*5.50  +'px;width:100%;border:1px solid #000; background-color:yellow"></div></div>'
                        );  
                    });
            }
        })
    }   
</script>

At the moment the code returns <div id="countryweather"> in every loop. I want it to count so it returns <div id="countryweather2">, <div id="countryweather3"> etc.

DinoMyte · Accepted Answer · 2016-01-27 22:55:11Z

2

a. Move var sum outside the each loop ( make it global )
b. Increment the value of sum by 1 via ++;

<script>        
    ajax();
    function ajax(){        
        $.ajax({
            url:"ChinaWeather.json",
            dataType:"json",
            success: function(data){
                var sum = 1;
                $.each(data, function(index, item){                    
                    $('#countryweatherwrap').append('<div id="countryweather' + sum + '">' + data[index].season + 'Temperatuur: ' +
                        data[index].temperature+' °C <br />' + '<div style="height:'+ data[index].temperature*5.50  +'px;width:100%;border:1px solid #000; background-color:yellow"></div></div>'                      
                        );  
                      sum++;
                    });
            }
        })
    }   
</script>

edited Jan 27, 2016 at 22:55

answered Jan 27, 2016 at 22:36

DinoMyte

8,8781 gold badge21 silver badges27 bronze badges

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

3 Comments

Nick White Over a year ago

Based on what the OP wants, I would recommend declaring sum inside the success callback (the line just before $.each).

DinoMyte Over a year ago

Agreed. That makes sense. +1

Mae Over a year ago

@DinoMyte Thanks for answering! I haven't programmed with jQuery for awhile, I didn't know it could be that simple!

putvande · Accepted Answer · 2016-01-27 22:39:11Z

1

You can use the index:

$.each(data, function(index, item) {
    $('#countryweatherwrap').append('<div id="countryweather' + (index+1) + '">' + data[index].season + 'Temperatuur: ' + data[index].temperature + ' °C <br />' + '<div style="height:' + data[index].temperature * 5.50 + 'px;width:100%;border:1px solid #000; background-color:yellow"></div></div>');
});

That has an index starting at 0 so add 1.

answered Jan 27, 2016 at 22:39

putvande

15.3k3 gold badges37 silver badges51 bronze badges

Collectives™ on Stack Overflow

Making a counting sum in jQuery each

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related