Question

我最近在jQuery中使用.map创建了一个数组，现在我需要访问其中的元素。为了处理这个问题，我简单地遍历了数组并试图抓住各种项目，但我似乎无法让它发挥作用。

＆＃13;

$('#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();
});

＆＃13;

<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>

＆＃13;

我想要做的是从我的数组中输出id lat和long。无论我尝试什么，我似乎都会遇到undefined错误。例如，我编写了以下代码：

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

此代码为我返回了lat，但也出现了错误：

TypeError: arr[i].plot1 is undefined[Learn More]

我尝试了几种变化，但似乎没有任何效果。任何人都可以提供一种访问我的元素的好方法吗？

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访问它，或者迭代执行

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

Answer 2

通过将for循环更改为这样，您可以获得所需的所有值。

基本上，当你在plot2中时，你试图遍历plot1。

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

Answer 3

在你jQuery.map()内最好返回这样的对象：

{
  id: this.id,
  lat: $(this).find('.lat input').val(),
  long: $(this).find('.long input').val()
}

代码：

＆＃13;

$('#go').on('click', function () {
  var arr = $('.plotrow')
    .map(function () {
      return {
        id: this.id,
        lat: $(this).find('.lat input').val(),
        long: $(this).find('.long input').val()
      };
    })
    .get();

  // Accessing element in array
  arr.forEach(function (el) {
    console.log('Element id:', el.id);
    console.log('Element lat:', el.lat);
    console.log('Element long:', el.long);
  });
});

＆＃13;

<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>

＆＃13;

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

3 个答案: