从 javascript 数组创建一个 Jquery 数组答案

【问题标题】：Make a Jquery array from a javascript array从 javascript 数组创建一个 Jquery 数组
【发布时间】：2013-12-30 18:43:26
【问题描述】：

我正在使用以下代码从谷歌地图距离矩阵中提取一些里程数据。问题是它以纯 javascript 的形式返回。我已经设法让它将数据放入一个 javascript 数组中，所以我有：

arrResults[0]
arrResults[1]
arrResults[2]
arrResults[3]

但是我现在想在 Jquery 中使用该数组，但不知道如何将其转换为 Jquery 数组？.

    $( document ).ready(function() {
        $( "#submit" ).click(function() {
        $("#my_map").gmap3({
      getdistance:{
        options:{ 
          origins:["pe219px","ng323rj"], 
          destinations:["pe219px","ng323rj"],
          travelMode: google.maps.TravelMode.DRIVING,
          unitSystem: google.maps.UnitSystem.IMPERIAL
        },
        callback: function(results, status){
          var html = "";
          var arrResults = [];
          if (results){
            for (var i = 0; i < results.rows.length; i++){
              var elements = results.rows[i].elements;
              for(var j=0; j<elements.length; j++){
                switch(elements[j].status){
                  case "OK":
                  var sd=$(this).text();  
                    html += parseInt(elements[j].distance.text) + "<br />";
        arrResults.push(elements[j].distance.text); 

                    break;
                  case "NOT_FOUND":
                    html += "The origin and/or destination of this pairing could not be geocoded<br />";
                    break;
                  case "ZERO_RESULTS":
                    html += "No route could be found between the origin and destination.<br />";
                    break;
                }
              }
            } 
          } else {
            html = "error";
          }
          $("#my_map").html( html );
        }
      }
    });
         }); });
    </head>

    <body>
    <div id="my_map"></div>
    <p><a id="submit" href="#">Submit</a></p>

【问题讨论】：

jQuery 是 JavaScript -- 你在问什么？
什么是jQuery数组？你希望用数组做什么？
他想要一个对象来关联访问值，我假设？
如果我在页面末尾的视图结果按钮上放置一个 jquery 点击函数并让它发出警报 (arrResults[2]);什么都没有发生，所以我推测这是因为它是普通的 javascript 进行调用，并且不能直接在 jquery 函数中“按原样”使用？。
var arrResults 声明该函数的本地数组。其他功能将无法访问它。

标签： javascript jquery arrays google-maps-api-3 jquery-gmap3

【解决方案1】：

由于您使用的是gmap3 插件，所以问题稍微大一些，但这是我解决问题的方法。

首先：已编辑（有关详细信息，请参阅编辑）

其次，通过在 IIFE 顶部声明arrResults，使您的函数全局可用。不要在其他任何地方重新声明它。

第三，将你的回调逻辑从 ajax 函数中分离出来，形成一个新的函数。它使代码更易于阅读。类似processData()。

第三，一旦 AJAX 完成并且您的 processData 函数已完成运行，请使用 jQuery 将新的 #viewresults 按钮添加到您的页面。

$('body').append('<input id="viewresults" type="submit" value="View results"/>')

您这样做是因为 AJAX 是 asyncronous。在收集数据之前单击viewresults 按钮会导致错误或什么都没有，因此（至少对您的代码而言）只有在数据可用时才使按钮可用是有意义的。

我在this jsfiddle 中提供了这些想法的摘要（未经测试，但应该给你一些线索）。我希望你觉得它有用。

【讨论】：

安迪，已经有一个$( document ).ready(function() {...}) 包装器，在制作专用包装器之前至少应该考虑一下。
你是对的。只是习惯了这样做，因为在我开始使用 jQuery 之前，我的应用程序中通常有非 jQuery 代码。编辑了问题的那一部分。