Javascript 如何使用jQuery访问数组中的元素

我最近在jQuery中使用

.map

创建了一个数组，现在我需要访问其中的元素。为了处理这个问题，我只是在数组上迭代，并尝试获取各种项目，但我似乎无法使它工作

$（'go'）。在（'click'，函数（）{
var arr=$（'.plotrow'）.map（函数（）{
var o={}；
o[this.id]=[
{lat:$（this.find（'.lat input'）.val（）}，
{long:$（this.find（'.long input'）.val（）}
]
返回o；
}).get（）；
});

地块1
情节2
输出
走！
您在一个数组上迭代

[
    {
        "plot1": [
            {
                "lat": "59.545205"
            },
            {
                "long": "1.53572"
            }
        ]
    },
    {
        "plot2": [
            {
                "lat": "59.21344"
            },
            {
                "long": "1.33437"
            }
        ]
    }
]

也就是说，在第一次迭代中

{"plot1": [ ... ]},

但是第二次迭代得到了你

{"plot2": [ ... ]},

然后您的
arr[i]['plot1']
是未定义的，因为键是
plot2
等等


如果您创建了一个对象，这将使您更轻松

$('#go').on('click', function () {
    var obj = {};

  $('.plotrow').each(function() {
    obj[this.id] = {
      lat: $(this).find('.lat input').val(),
      lon: $(this).find('.long input').val()
    };
  });
});

你最终会得到

{
    "plot1": {
        "lat": "59.545205",
        "lon": "1.53572"
    },
    "plot2": {
        "lat": "59.21344",
        "lon": "1.33437"
    }
}

您可以通过执行
obj.plot1.lat
来访问它，或者迭代执行

$.each(obj, function(_,item) {
    var lat = item.lat;
    var lon = item.lon;
})

您正在迭代一个数组，该数组如下所示

[
    {
        "plot1": [
            {
                "lat": "59.545205"
            },
            {
                "long": "1.53572"
            }
        ]
    },
    {
        "plot2": [
            {
                "lat": "59.21344"
            },
            {
                "long": "1.33437"
            }
        ]
    }
]

也就是说，在第一次迭代中

{"plot1": [ ... ]},

但是第二次迭代得到了你

{"plot2": [ ... ]},

然后您的
arr[i]['plot1']
是未定义的，因为键是
plot2
等等


如果您创建了一个对象，这将使您更轻松

$('#go').on('click', function () {
    var obj = {};

  $('.plotrow').each(function() {
    obj[this.id] = {
      lat: $(this).find('.lat input').val(),
      lon: $(this).find('.long input').val()
    };
  });
});

你最终会得到

{
    "plot1": {
        "lat": "59.545205",
        "lon": "1.53572"
    },
    "plot2": {
        "lat": "59.21344",
        "lon": "1.33437"
    }
}

您可以通过执行
obj.plot1.lat
来访问它，或者迭代执行

$.each(obj, function(_,item) {
    var lat = item.lat;
    var lon = item.lon;
})

通过将for循环更改为这样，可以获得所需的所有值

实际上，当您在plot2中时，您试图在plot1上循环

for (i = 0; i < arr.length; i++) {
    var plot = 'plot' + (i + 1);
    console.log(arr[i][plot][0]['lat']);            
    console.log(arr[i][plot][1]['long']);            
}

for（i=0；i
通过将for循环更改为这样，可以获得所需的所有值

实际上，当您在plot2中时，您试图在plot1上循环

for (i = 0; i < arr.length; i++) {
    var plot = 'plot' + (i + 1);
    console.log(arr[i][plot][0]['lat']);            
    console.log(arr[i][plot][1]['long']);            
}

for（i=0；i
在您内部，最好返回如下对象：

{
  id: this.id,
  lat: $(this).find('.lat input').val(),
  long: $(this).find('.long input').val()
}

代码：


$（'go'）。在（'click'，函数（）{
var arr=$（'.plotrow'）
.map（函数（）{
返回{
id:this.id，
lat:$（this.find（'.lat input'）.val（），
long:$（this.find（'.long input'）.val（）
};
})
.get（）；
//访问数组中的元素
arr.forEach（功能（el）{
log（'Element id:'，el.id）；
console.log（'Element lat:'，el.lat）；
log（'Element long:'，el.long）；
});
});

地块1
情节2
输出
走！
在您内部，最好返回如下对象：

{
  id: this.id,
  lat: $(this).find('.lat input').val(),
  long: $(this).find('.long input').val()
}

代码：


$（'go'）。在（'click'，函数（）{
var arr=$（'.plotrow'）
.map（函数（）{
返回{
id:this.id，
lat:$（this.find（'.lat input'）.val（），
long:$（this.find（'.long input'）.val（）
};
})
.get（）；
//访问数组中的元素
arr.forEach（功能（el）{
log（'Element id:'，el.id）；
console.log（'Element lat:'，el.lat）；
log（'Element long:'，el.long）；
});
});

地块1
情节2
输出
走！
我想你想要这样的东西：（看看开发人员控制台）我想你想要这样的东西：（看看开发人员控制台）这更有意义@adeneo我已经实施了这种有助于简化结构的方法。一个关于迭代的问题，
item.lat
和
item.lon
返回为未定义
item
作为行id返回。@Yanayaya-你说得对，我忘记了
jQuery.fn。每个
都将item作为第一个参数，但是当只使用
jQuery时。每个
项都将是第二个参数。他们有点不同。我编辑了答案来解决这个问题。这更有意义@adeneo我实施了这个方法，它有助于简化结构。一个关于迭代的问题，
item.lat
和
item.lon
返回为未定义
item
作为行id返回。@Yanayaya-你说得对，我忘记了
jQuery.fn。每个
都将item作为第一个参数，但是当只使用
jQuery时。每个
项都将是第二个参数。他们有点不同。我编辑了答案来解决这个问题。