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

你可以使用jQuery each（）和map（）。

每个（）方法

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

OR

map（）方法

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

Answer 2

实现此目标的最简单方法是以所需格式构建对象，然后通过JSON.stringify运行该对象。要构建对象，可以使用map()，如下所示：

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

Working example

请注意，我修改了点击处理程序，以便使用不引人注目的javascript附加，因为on*事件属性已经过时，应尽可能避免。

Answer 3

function Make_String() {
    var final = {};
    $('.PackageBuilder-AddPax').each(function() {
    $input = $(this).find($('[name="input2"]'));
    var obj = {};
    var arr = [];
    $input.each(function() {
        arr.push($(this).val());
    })
   final[$(this).find($('[name="input1"]')).val()] = arr;
   })
   console.log(final)
}

＆＃13;

function Make_String() {
  var final = [];
  $('.PackageBuilder-AddPax').each(function() {
    $input = $(this).find($('[name="input2"]'));
    var obj = {};
    var arr = [];
    $input.each(function() {
      arr.push($(this).val());

    })
    obj.input1 = $(this).find($('[name="input1"]')).val();
    obj.input2 = arr;
    final.push(obj);
  })
  console.log(final)
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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()">

＆＃13;

jQuery每个函数都无法正常工作，无法创建json字符串

3 个答案: