Jquery Array在tr迭代中重复记录

时间:2016-11-16 09:41:24

标签: javascript jquery html

我的表&代码

NewsNo GeoLoc
------ ------
1       US
2       UK
3       GER


var GloablArr = [];

$("#btnRefUp").click(function () {

   var newssArr = {};
    $("#ntbl > tbody > tr").each(function () {

        newssArr['NewsNo']  = $(this).find('td :eq(0)').val();
        newssArr['GeoLoc']  = $(this).find('td :eq(1)').val();

        GloablArr.push(newssArr) <-- GlobalArr shows the final item(s) only.

    });

});

但我的结果是这样的(GlobalArr),
3 GER
3 GER
3 GER

2 个答案:

答案 0 :(得分:1)

您只需要创建一个引用newsArr - 之后您将相同的属性推送到它并每次向全局数组推送另一个引用。

一个简单的解决方法是每次迭代each

重新创建一个新对象
$("#ntbl > tbody > tr").each(function () {
    var newssArr = {};
    newssArr['NewsNo']  = $(this).find('td :eq(0)').val();
    newssArr['GeoLoc']  = $(this).find('td :eq(1)').val();

    GloablArr.push(newssArr) <-- GlobalArr shows the final item(s) only.

});

更好的解决方案可能是在1转

中创建全局数组的所有项目
var items = $("#ntbl > tbody > tr").map(function () {
    return {
     NewsNo: $(this).find('td :eq(0)').val(),
     GeoLoc: $(this).find('td :eq(1)').val()
    };
}).get();
GloablArr = items;

答案 1 :(得分:1)

您要反复更新同一个对象,而不是需要在每个方法的回调函数中初始化对象。

var GloablArr = [];

$("#btnRefUp").click(function() {
  $("#ntbl > tbody > tr").each(function() {
    var newssArr = {};
    newssArr['NewsNo'] = $(this).find('td :eq(0)').val();
    newssArr['GeoLoc'] = $(this).find('td :eq(1)').val();
    GloablArr.push(newssArr) 
  });
});

或直接生成对象并推送到数组。

var GloablArr = [];

$("#btnRefUp").click(function() {
  $("#ntbl > tbody > tr").each(function() {
    GloablArr.push({
      NewsNo: $(this).find('td :eq(0)').val(),
      GeoLoc: $(this).find('td :eq(1)').val()
    })
  });
});

您甚至可以使用map()方法而不是each()方法来简化代码。

var GloablArr;

$("#btnRefUp").click(function() {
  GloablArr = $("#ntbl > tbody > tr").map(function() {
    return {
      NewsNo: $(this).find('td :eq(0)').val(),
      GeoLoc: $(this).find('td :eq(1)').val()
    };
  }).get(); // get the result as array
});