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

Question

Im Timo。我是網絡編程新手，我有這個問題。我做了一個簡單的3行表格。每個td必須有一個隨機數值。我的問題是，我的代碼在每個td元素上放置相同的值。

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

樓下是我的js代碼：

 $(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

這是因爲你生成一個隨機值，然後利用每個td S的，而不是生成一個新的每個td。所以：

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

換句話說，在循環內部生成隨機值，而不是在循環外部。

此外，要明白的是，在each回調中，上下文即this指向被考慮的元素。所以，你不需要

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

而僅僅

$(this).text(... 

Answer 2

這是因爲每個語句之前生成的隨機值，所以相同的值每次被使用。

把你的Math.random（）* 100移動到你的.text（）中，並且所有的都可以工作。

Answer 3

該問題與.each()或.html()無關。您只生成一次隨機值，併爲每個td設置相同的值。你需要這樣做。

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); 

     }); 


    }; 

Answer 4

$.each()本質上是一個foreach循環。您需要在每次迭代中創建一個新的隨機值。

像這樣：

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); 

    }); 
}