2011-09-08 61 views
1

我有一個簡單的用戶界面,其中有一個鏈接,說「添加項目」。點擊時,下方會出現一對輸入框。如果再次點擊,則會出現另一對。我試圖想到生成這些元素並將其轉換爲某種鍵值對的json數組的最佳方式(每對中的第一個輸入元素是鍵,第二個輸入元素是該值)。轉換輸入元素成json

現在我只是有一個櫃檯,我生成使用它,例如(在「添加項目」鏈接的點擊事件)的ID,:

$('#features').append('<input id="feature-name-' + self.featureCount + '" type="text" name="asdf" /><a class="delete-feature" data-id="' + self.featureCount + '">Delete</a><input id="feature-description-' + self.featureCount + '" type="text" name="asdf" />'); 

我不知道有什麼用作爲「名稱」屬性,以便於從它們創建一個json數組。

+0

爲什麼不能使用與* id *屬性相同的值? – RobG

回答

0

你可以做這樣的事情,而不使用ID屬性。

$('#features').append('<div><input type="text" /> 
<a class="delete-feature" data-id="' + self.featureCount + '">Delete</a><input type="text" /></div>'); 

而JavaScript,

var yourArray=[]; 
$('#yourButton').click(function(){ 
    $('#features div').each(function(){ 
     var div=$(this); 
     var k=$('input:first',div).val(); 
     var v=$('input:first',div).next().val(); 

     yourArray.push({key:k, value: v}); 

    }); 

}); 
0

不要緊,你用什麼名稱屬性,所以只要有名稱和描述name s爲不同的。假設這些元素全部附加到ID爲myform的表單上。給每一對自己的包裝對象。在這裏,我使用了div,但fieldset同樣適用。現在

$('#features').append(
    '<div class="feature-div"> 
    '<input id="feature-name-' + self.featureCount + '" type="text" name="asdf" />' + 
    '<a class="delete-feature" data-id="' + self.featureCount + '">Delete</a>' + 
    '<input id="featurena-description-' + self.featureCount + '" type="text" name="asdf" />' + 
    '</div>'); 

,有可能理智地提取每個對:

var myarray = []; 
$('#myform .feature-div').each(function(i, v) { 
    myarray.push([ 
     $('input[name=name]', v).val(), $('input[name=description]', v).val()]); 
}); 

但是還是要呈現的數據。