ページ上のフィールドからオブジェクトの配列を作成します

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

を私は以来lngの代わりlongを使用

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(); 

：あなたは、DOM要素を選択する方法を変更する必要があるかもしれませんが、これは、多かれ少なかれ正しいことを行います210は多くのプログラミング言語の予約語です（ただし、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の中で：

<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 class'd要素：作業例

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 →

を