遍歷jquery中的類元素並放入json格式

Question

我想遍歷動態創建的選擇和輸入字段。 我的html代碼：

 <div id="speeddefinition">
<div class="row speedline">
    <div class="col-md-4">
    <div class='input-group ' id=''>
        <select class="form-control firstentry" name="line[]" >
            <option value="1">Anlage 1</option> 
            <option value="2">Anlage 2</option> 
            <option value="3">Anlage 3</option> 
            <option value="4">Anlage 4</option> 
        </select>
    </div>
    </div>
    <div class="col-md-3">
    <div class='input-group ' id=''>
    <input name="speed[]" value="" class="form-control firstentry"  type="text" ></input>
    </div>
    </div>
</div>
</div>

我的Jquery：

function createJSON() {
    var values = [];
    $("#speeddefinition").each(function() {
        $(this).find("input, select").each(function() {
            values.push($(this).val());
        });
    });
    var valJson = JSON.stringify(values);
    console.log(valJson);
}

輸出是這樣的： ["2","5","3","4"]

我已經嘗試過各種方法，但是無法達到這樣的結果：

{
    "1": {
        "line": 2,
        "speed": 5,
    }
    "2": {
        "line": 3,
        "speed": 4,
    }
}

Answer 1

元素的ID必須唯一，因此如果重復結構，請使用<div class="speeddefinition">而不是<div id="speeddefinition">

然后

var obj = {};
$('.speeddefinition').each(function (i) {
    var $this = $(this);
    obj[i] = {
        speed: $this.find('input').val(),
        line: $this.find('select').val()
    }
})
console.log(obj)

Answer 2

function createJSON() {
var values = [];
var innerValues = new Array() ;

$("#speeddefinition").each(function() {//it should not be an id

$(".speeddefinition").each(function() { //it should be a class

    $(this).find("input").each(function() {
        innerValues['line'] = $(this).val(); 
    });

     $(this).find("select").each(function() {
        innerValues['speed'] = $(this).val(); 
    });

    values.push(innerValues);
});

var valJson = JSON.stringify(values);
console.log(valJson);
}

也許這個功能會幫助ypu ....

Answer 3

這樣的事情會起作用：

$('.speeddefinition').map(function() {
    return {line: $('select', this).val(), speed: $('input', this).val()};
}).get();

將給你想要的數組：

[{line: "1", speed: "1"}, {line: "2", speed: "2"}]

注意： .speeddefinition是一個類，而不是id。