입력 요소 쌍을 json으로 변환

Question

"항목 추가"라는 링크가있는 간단한 UI가 있습니다. 이 버튼을 클릭하면 입력 상자 쌍이 나타납니다. 다시 클릭하면 다른 쌍이 나타납니다. 이러한 요소를 생성하고 키 값 쌍의 일종의 json 배열로 변환하는 가장 좋은 방법을 생각하려고합니다. 각 쌍의 첫 번째 입력 요소는 키이고 두 번째 입력 요소는 값입니다.

은 지금은 단지 카운터를하고 난 등 (이하 "항목을 추가"링크의 클릭 이벤트) 등을 사용하여 IDS 생성 : 내가 사용 해야할지 모르겠어

$('#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 배열을 쉽게 만들 수 있습니다.

Answer 1

id 속성을 사용하지 않고 이와 같은 작업을 수행 할 수 있습니다. 당신이 이름과 name의 설명으로 너무 오래, 이름 속성에 사용 중요하지 않습니다

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

    }); 

}); 

Answer 2

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

그리고 당신의 자바 스크립트

는 다르다. 이 요소들이 모두 ID가 myform 인 양식에 추가된다고 가정 해 보겠습니다. 각 쌍에 고유 한 랩퍼 오브젝트를 제공하십시오. 여기서는 div을 사용했지만 fieldset도 똑같이 적합합니다.

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

을 또는 당신이 원하는 그러나 데이터를 제시하기 :

$('#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>'); 

지금, 그것은 현명 각 쌍을 추출 할 수 있습니다.