使用 $.each 函数缩短 js 脚本

Question

我有以下 .js 代码，它读取 json 文件以每分钟更新 html 中的值。

$(document).ready(updateData);
function updateData() {
    $.ajaxSetup({ cache: false });
    $.getJSON("data/data.json", function(result){
        $('#id1').empty();
        $('#id1').append(result.id1);
        $('#id2').empty();
        $('#id2').append(result.id2);
        $('#id3').empty();
        $('#id3').append(result.id3);
        $('#id4').empty();
        $('#id4').append(result.id4);
        $('#id5').empty();
        $('#id5').append(result.id5);
        $('#id6').empty();
        $('#id6').append(result.id6);
        $('#id7').empty();
        $('#id7').append(result.id7);
        $('#id8').empty();
        $('#id8').append(result.id8);
        $('#id9').empty();
        $('#id9').append(result.id9);
    });
    setTimeout(updateData, 60000);
}

可以使用 $.each() 函数以更短的方式重写吗？

Answer 1

您可以使用循环：

var i;
for (i = 1; i <= 9; i++) {
    $('#id'+i).html(result['id'+i]);
}

Answer 2

可以使用简单的 for 循环进行改进：

$.ajaxSetup({ cache: false }); // 1
$(document).ready(updateData);

function updateData() {
  $.getJSON("data/data.json", function(result) {
    for (var i = 1; i<= 9; i++) {
      $('#id' + i).empty().append(result['id' + i]); // 2
    }

    setTimeout(updateData, 60000); // 3
  });
}

但是，通过串联 ID 访问 DOM 看起来不太好。
例如，您可以尝试使用 CSS 类和 data 属性来实现它。

一些小改进：

ajaxSetup只能初始化一次，不需要每次都调用
您可能不需要同时 empty() 和 append()。如果是文本，您可以简单地使用 .text()，或 .html() 用于 HTML。
最好在 getJSON 回调中调用 setTimeout，这样它会在上一个请求完成后的 60 秒内更新数据，在 .always() 处理程序中更好。想象一下，您的一位客户的连接速度非常慢，加载此 JSON 需要 60 多秒。会导致意想不到的结果。

Answer 3

for(var i =1;i<=9;i++){
$('#id'+i).empty();
$('#id'+i).append(result.id+1); }

这行得通

Answer 4

多一点 jQuery 左右，使用 $.each

$(document).ready(updateData);

function updateData() {
    $.ajaxSetup({
        cache: false
    });
    $.getJSON("data/data.json", function(result) {
        $.each("123456789".split(""), function(_,i) {
            $('#id'+i).html(result['id'+i));
        });
    }); 

    setTimeout(updateData, 60000);
}

使用 $.each 函数缩短 js 脚本

Shorten js script using $.each function

javascript

each

jquery