使用 jquery 迭代 json 數據

Question

當我在下面的示例中警告 output 時，我得到了正確的 output，但是當我console.log記錄 output 時，我得到： Number {}

"width": [ 25, 50, 75, 100 ],

jQuery.each(width, function() {
  new_width = this;
  console.log(new_width);
  alert(new_width);
  document.querySelectorAll('#source').forEach(function (element, index) {
    element.style.width = new_width;
  });
});

Answer 1

問題是因為您使用jQuery.each()來循環遍歷數組。 通過this訪問時，您會收到Number object，而不是 integer 值，因此{} output 到日志。 有幾種方法可以解決這個問題：

1) 使用傳遞給 function 的 arguments 而不是this參考：

 var foo = { "width": [ 25, 50, 75, 100 ] } jQuery.each(foo.width, function(i, value) { console.log(value); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

2) 在 object 上使用toString()或valueOf() 。 旁注，您問題中的alert()有效，因為它在后台調用toString() 。

 var foo = { "width": [ 25, 50, 75, 100 ] } jQuery.each(foo.width, function() { console.log(this.toString()); console.log(this.valueOf()); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

3）不要使用 jQuery 循環遍歷一個普通的值數組。 使用forEach()循環：

 var foo = { "width": [ 25, 50, 75, 100 ] } foo.width.forEach(function(value) { console.log(value); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

我更喜歡后一種方法，但它們中的任何一種都有效。