Question

我使用.each循环迭代一些div元素并获取其中包含的一些输入框的值。每个div代表一行，并有一个Id表示这一点，即plot1, plot2...。我想将所有这些数据存储在一个数组中，但我不确定如何构建它。为了举例说明我的意思，这里有一些代码。

有两个div表示行，每行有两个输入字段。

<div class="coords">
    <div id="plot1" class="plotrow">
        <div class="lat">
            <input type="text" id="plot1_lat" value="1234" />
        </div>
        <div class="long">
            <input type="text" id="plot1_long" value="4567" />
        </div>
    </div>
    <div id="plot2" class="plotrow">
        <div class="lat">
            <input type="text" id="plot2_lat" value="6984" />
        </div>
        <div class="long">
            <input type="text" id="plot2_long" value="2348" />
        </div>
    </div>
    <button type="button" id="go">Go!</button>
</div>

使用jQuery我想迭代这些div并使用以下格式将数据存储在数组中。

{ "<value from div id>": [{ 
    "lat" : <<value from input>> 
    }, { 
    "long" : <<value from input>>
    }
]};

这是我的功能，当你点击一个id为go

的按钮时会触发该功能

$('#go').on('click', function () {
        var object = {};
        var array = [];

        $('.coords input:text').each(function () {

            var someArray = {
                "plot": [{
                    "lat": this.value
                }, {
                    "long": this.value
                }]
            };
            array.push(someArray);
        });
    });

我对阵列构造有点困惑所以我已经设置了一些虚拟值，但是＆＃34;情节＆＃34;应该是div行的id，lat和long应该是每个div行中两个输入的值。

此外，我发现由于它位于.each循环内，因此创建了四个数组（每个输入一个）而不是一个数组，所有输入都按div id组织。

我希望有道理，有人可以提供一些建议吗？

Answer 1

要实现您的要求，您可以使用map()从HTML结构构建数组，如下所示：

var arr = $('.plotrow').map(function() {
  var o = {};
  o[this.id] = [
    { lat: $(this).find('.lat input').val() },
    { long: $(this).find('.long input').val() }
  ]
  return o;
}).get();

console.log(arr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="coords">
  <div id="plot1" class="plotrow">
    <div class="lat">
      <input type="text" id="plot1_lat" value="1234" />
    </div>
    <div class="long">
      <input type="text" id="plot1_long" value="4567" />
    </div>
  </div>
  <div id="plot2" class="plotrow">
    <div class="lat">
      <input type="text" id="plot2_lat" value="6984" />
    </div>
    <div class="long">
      <input type="text" id="plot2_long" value="2348" />
    </div>
  </div>
  <button type="button" id="go">Go!</button>
</div>

我假设您正在构建的对象结构是某些外部插件所必需的，因为它可以根据您的HTML结构进行简化。

如何使用jQuery在.each循环中构造数组？

1 个答案: