Question

我有一个页面，在列表中显示酒店数据。我在页面上有这些数据：

<input type="hidden" class="name" value="Hotel1" />
<input type="hidden" class="latitude" value="-12.3456" />
<input type="hidden" class="longitude" value="12.3456" />

<input type="hidden" class="name" value="Hotel2" />
<input type="hidden" class="latitude" value="98.7654" />
<input type="hidden" class="longitude" value="-98.7654" />

我想从这些值创建一个对象数组，这样我就可以循环遍历每个酒店并执行以下操作：

$.each(hotels, function (index, obj) {
    var name = obj.name;
    var lat = obj.latitude;
    var long = obj.longitude;
});

Answer 1

您可能需要更改如何选择DOM元素，但这或多或少会做正确的事情：

var $names = $('input[type="hidden"].name'),
    hotels = $names.map(function ()
    {
        var $this = $(this),
            $lat = $this.next(),
            $lng = $lat.next();

        return {
            name: $this.val(),
            lat: $lat.val(),
            lng: $lng.val()
        };
    }).get();

我使用lng代替long，因为long是许多编程语言中的保留字（尽管不是，但不是JS）。

Answer 2

这对数据来说有点奇怪，但是你可以做点什么：

var inputs = $("input[type=hidden]", containerElement);
var data = {};
for(var i = 0; i < inputs.length; i += 3) {
     var obj = {};
     obj.latitude = inputs[i + 1].value;
     obj.longitude = inputs[i + 2].value;
     data[inputs[i].value] = obj;
}

然后您可以像这样访问数据：

data.Hotel1.longitude

Answer 3

首先，将输入标记分组到不同的字段集中：

<fieldset>
    <input type="hidden" class="name" value="Hotel1" />
    <input type="hidden" class="latitude" value="-12.3456" />
    <input type="hidden" class="longitude" value="12.3456" />
</fieldset>
<fieldset>
    <input type="hidden" class="name" value="Hotel2" />
    <input type="hidden" class="latitude" value="98.7654" />
    <input type="hidden" class="longitude" value="-98.7654" />
</fieldset>

现在可以使用jQuery构建对象：

var data = [];
$('fieldset').each(function(i, fieldset)
{
    data[i] = {};
    $(fieldset).find('input:hidden').each(function(j, input))
    {
        data[i][input.className] = input.value;
    }
});

此代码适用于您将使用的任何集合。

Answer 4

假设您有相同数量的.name，.latitude和.longitude类元素，您可以使用此功能：

var $names = $(".name");
var $lats = $(".latitude");
var $longs = $(".longitude");

var hotels = new Array();

$names.each(function(i, e){
    hotels.push({
        name: $names.eq(i).val(), 
        lat: $lats.eq(i).val(), 
        lng: $longs.eq(i).val()
    });
});

$.each(hotels, function (i, obj) {
    var name = obj.name;
    var lat = obj.lat;
    var lng = obj.lng;
        alert(name + "\n" + lat + "\n" + lng);
});

工作示例：http://jsfiddle.net/hunter/KY8BG/2/

Answer 5

var hotels = [];
$('input[type="hidden"].name').each(function(i, el){
    var $name = $(this),
        $lat = $name.next('input[type="hidden"].latitude'),
        $long = $lat.next('input[type="hidden"].longitude'),
        obj = {};
    obj.name = $name.val();
    obj.latitude = $lat.val();
    obj.longitude = $long.val();
    hotels.push(obj);
});

Demo →

从页面上的字段创建对象数组

5 个答案: