javascript - 如何使用 jQuery 访问数组中的元素

Question

我最近在 jQuery 中使用 .map 创建了一个数组，现在我需要访问其中的元素。为了处理这个问题，我只是遍历数组并尝试获取各种项目，但我似乎无法让它工作。

$('#go').on('click', function () {
  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();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="coords">
    <div id="plot1" class="plotrow">
        <h3>Plot 1</h3>
        <div class="lat">
            <input type="text" id="plot1_lat" value="59.545205" class="k-textbox" />
        </div>
        <div class="long">
            <input type="text" id="plot1_long" value="1.53572" class="k-textbox" />
        </div>
    </div>
    <div id="plot2" class="plotrow">
        <h3>Plot 2</h3>
        <div class="lat">
            <input type="text" id="plot2_lat" value="59.21344" class="k-textbox" />
        </div>
        <div class="long">
            <input type="text" id="plot2_long" value="1.33437" class="k-textbox" />
        </div>
    </div>
    <div class="plot output">
        <h3>Output</h3>
    </div>
    <button type="button" id="go">Go!</button>
</div>

我想做的是从我的数组中输出 id、lat 和 long。无论我尝试什么，我似乎都会收到 undefined 错误。比如我写了下面的代码:

for (i = 0; i < arr.length; i++) {
  console.log(arr[i]['plot1'][0]['lat']);            
}

此代码为我返回了 lat，但也返回了以下错误:

类型错误:arr[i].plot1 未定义[了解更多]

我已经尝试了几个变体，但似乎没有任何效果。谁能提供一种访问我的元素的好方法？

Answer 1

你正在遍历一个看起来像这样的数组

[
    {
        "plot1": [
            {
                "lat": "59.545205"
            },
            {
                "long": "1.53572"
            }
        ]
    },
    {
        "plot2": [
            {
                "lat": "59.21344"
            },
            {
                "long": "1.33437"
            }
        ]
    }
]

意思是在第一次迭代中，你得到

{"plot1": [ ... ]},

但是第二次迭代让你成功

{"plot2": [ ... ]},

然后你的 arr[i]['plot1'] 是未定义的，因为键是 plot2 等。

---

如果你创建一个对象，这会让你更容易

$('#go').on('click', function () {
    var obj = {};

  $('.plotrow').each(function() {
    obj[this.id] = {
      lat: $(this).find('.lat input').val(),
      lon: $(this).find('.long input').val()
    };
  });
});

你最终会得到

{
    "plot1": {
        "lat": "59.545205",
        "lon": "1.53572"
    },
    "plot2": {
        "lat": "59.21344",
        "lon": "1.33437"
    }
}

你可以在哪里做 obj.plot1.lat 来访问它，或者迭代 do

$.each(obj, function(_,item) {
    var lat = item.lat;
    var lon = item.lon;
})