jquery - 如何使用 jQuery 在 .each 循环中构建数组？

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

我对数组构造有点困惑，所以我放置了一些虚拟值，但“图”应该是 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 结构进行简化。