我不明白jQuery .each（）和.html（）方法是如何工作的

Question

Im Timo. I'm new at web programming and I have this issue. I have made a simple html table with 3 rows. Each td has to have a random numeric value. My problem is that my code puts the same value at every td element.

http://jsfiddle.net/timosergio/30ydu4oe/

Down below is my js code:

        $(function() {

            randomValues();
            //alert(1);
        });


    var randomValues = function(){
        var $td = $('.table').find('td');

        // each td has to have a different random value

        var random_values = Math.random() * 100 ;

        $td.each(function(i){

            //console.log(i + ":" + Math.random() * 100);

            $td.eq(i).text(random_values);

        });


    };

Answer 1

This is because you're generating a single random value then using that for each of the td s, rather than generating a new one for each td . So:

$td.each(function(i){
    $td.eq(i).text(Math.random(Math.random() * 100));
});

In other words, generate the random value inside the loop, not outside of it.

Furthermore, understand that, inside each callbacks, the context, ie this , points to the element being considered. So you don't need

$td.eq(i).text(...

but merely

$(this).text(...

Answer 2

$.each() is essentially a foreach loop. You need to create a new random value on each iteration.

Like this:

var randomValues = function() {
  var $td = $('.table').find('td');

  // each td has to have a different random value
  $td.each(function(i){
    //console.log(i + ":" + Math.random() * 100);

    var random_value = Math.random() * 100 ;

    $td.eq(i).text(random_value);

  });
}

Answer 3

It's because your random value is generated before the each statement, so the same value is being used each time.

Move your Math.random()*100 into your .text() and all should work.

Answer 4

The problem has nothing to do with .each() or .html() . You have generated the random value just once and setting the same value to each of the td. You need to do this.

var randomValues = function(){
        var $td = $('.table').find('td');

        // each td has to have a different random value

       // var random_values = Math.random() * 100 ;

        $td.each(function(i){

            //console.log(i + ":" + Math.random() * 100);

            $td.eq(i).text(Math.random() * 100);

        });


    };