javascript - jQuery 每个函数都不起作用并且无法创建 json 字符串

Question

我正在尝试创建一个 json 字符串。我必须从 html 中获取所有元素值以及类和名称。我正在使用 jQuery

HTML

<div id="PackageBuilder-AddPax-Main">   
    <div class="PackageBuilder-AddPax">
        <div>   
            <input type="text" name="input1" value="A1">
            <div class="HotelSearchFrom-div-input2">
                <input type="text" name="input2" value="1">
                <input type="text" name="input2" value="2">
            </div>
        </div>
    </div>
    <div class="PackageBuilder-AddPax">
        <div>   
            <input type="text" name="input1" value="A2">
            <div class="HotelSearchFrom-div-input2">
                <input type="text" name="input2" value="3">
                <input type="text" name="input2" value="4">
            </div>
        </div>
    </div>
    <div class="PackageBuilder-AddPax">
        <div>   
            <input type="text" name="input1" value="A3">
            <div class="HotelSearchFrom-div-input2">
                <input type="text" name="input2" value="5">
                <input type="text" name="input2" value="6">
            </div>
        </div>
    </div>
</div>
<input type="submit" onclick="Make_String()">

我必须制作这样的字符串，但我无法制作它。

[{"Input1":A1,"Input2":[1,2]},{"Input1":A2,"Input2":[3,4]},{"Input1":A3,"Input2":[5,6]}]

我正在使用以下代码

function Make_String(){
    var RoomGuests = [];
    var j = 0;
    $('#PackageBuilder-AddPax-Main').find('[name="input1"]').each(function(i){
        var NoOfAdults_Val = $('[name="input1"]').val()    
        var input2array = [];
        $('#HotelSearchFrom-div-input2').find('[name="input2"]').each(function() {
            alert($(this).val());
            input2array.push($(this).val());
        });
        RoomGuests[j] = [];
        RoomGuests[j]['Input1'] = NoOfAdults_Val;
        RoomGuests[j]['Input2'] = input2array;
        j++
    });
}

Answer 1

您可以使用 jQueryeach() 和 map() 来完成。

each()方法

function Make_String() {
    array = [];

    $('.PackageBuilder-AddPax').each(function(i,e) {
        $(this).find('.HotelSearchFrom-div-input2').each(function(i,e) {
            inputarray2 = [];
            $(this).find('[name="input2"]').each(function(i,e) {
                inputarray2.push($(e).val());
            })
        })

        str = {
            'Input1': $(this).find('[name="input1"]').val(),
            'Input2': inputarray2
        }
        array.push(str);
    });

    console.log(array);
    var jsonstring = JSON.stringify(array);
    console.log(jsonstring);
}

或者

ma​​p()方法

function Make_String() {
    var array = $('.PackageBuilder-AddPax').map(function() {
        return {
            'Input1': $(this).find('[name="input1"]').val(),
            'Input2': $(this).find('[name="input2"]').map(function() {
                return this.value;
            }).get()
        }
    }).get();
    console.log(array);
    var jsonstring = JSON.stringify(array);
    console.log(jsonstring);
}