Javascript Jquery显示<；部门>；班

我正在使用GoogleMapsAPI显示两个地址之间的持续时间，使用以下代码

function addresses(froma, toa) {
       var starting_location = froma;
    var end_location = toa;

    var service = new google.maps.DistanceMatrixService();
    service.getDistanceMatrix(
        {
            origins: [starting_location],
            destinations: [end_location],
            travelMode: 'DRIVING',
        }, callback);

    function callback(response, status) {

        $(".results").text("Duration: " + response.rows[0].elements[0].duration.text);

    }
}

我面临的问题是，我有一个while循环，它逐行显示客户机数据。在一个专栏里我有

<div class="results"></div>

此inturn显示具有相同值的所有列。如何显示每一列的唯一数据

---

提前感谢。

也许可以使用类似以下回调的方法来迭代结果并将其附加到输出div中：

function callback(response, status) {

    $.each(response.rows, function( index, row ) {

        $(".results").append("Duration: " + row.elements[0].duration.text + "<br>");

    }

}

函数回调（响应、状态）{
$.each（response.rows，函数（索引，行）{
$（“.results”）.append（“持续时间：“+row.elements[0].Duration.text+”
”；
}
}

我在这里进行猜测，但很可能视图的每一行中都有一个

元素。因此，当您执行jQuery选择器

.results

时，该代码将应用于所有具有类“results”的div

您可以使用唯一id作为jQuery选择器，也可以限制选择器的范围（类似于

$（rowElement）.find（'.results'）.text（..）

）

---

同样，这只是我的猜测。如果您可以共享while循环代码和DOM结构，我们可以更好地帮助您。

通过每个

行

循环，并在给定的

元素中找到每个旅行信息。JSON格式取自。我假设它与此类似：

{
  "originAddresses": [ "Greenwich, Greater London, UK", "13 Great Carleton Square, Edinburgh, City of Edinburgh EH16 4, UK" ],
  "destinationAddresses": [ "Stockholm County, Sweden", "Dlouhá 609/2, 110 00 Praha-Staré Město, Česká republika" ],
  "rows": [ {
    "elements": [ {
      "status": "OK",
      "duration": {
        "value": 70778,
        "text": "19 hours 40 mins"
      },
      "distance": {
        "value": 1887508,
        "text": "1173 mi"
      }
    }, {
      "status": "OK",
      "duration": {
        "value": 44476,
        "text": "12 hours 21 mins"
      },
      "distance": {
        "value": 1262780,
        "text": "785 mi"
      }
    } ]
  }, {
    "elements": [ {
      "status": "OK",
      "duration": {
        "value": 96000,
        "text": "1 day 3 hours"
      },
      "distance": {
        "value": 2566737,
        "text": "1595 mi"
      }
    }, {
      "status": "OK",
      "duration": {
        "value": 69698,
        "text": "19 hours 22 mins"
      },
      "distance": {
        "value": 1942009,
        "text": "1207 mi"
      }
    } ]
  } ]
}

您可以这样做：

function callback(response, status) {
    var div = $('<div></div>');

    response.rows.foreach(function(row, index) {
        div.append('<div>Trip: ' + (index + 1) + '</div>');
        row.elements.foreach(function(element) {
            var duration = $('<div>Duration: ' + element.duration.text + '</div>');
            div.append(duration);
        });
    });

    $(".results").append('<div>From: ' + response.originAddresses + '</div>');
    $(".results").append('<div>To: ' + response.destinationAddresses + '</div>');
    $(".results").append(div);

}

<div class="results">
    <div>From: Source Address</div>
    <div>To: Destination</div>
    <div> <!-- Repeat this block for each row in response.rows -->
        <div>Trip 1</div>
        <div>Duration: 19 hours 40 mins</div>
    </div>
    ...
    ...
</div>

函数回调（响应、状态）{
var div=$（''）；
response.rows.foreach（函数（行，索引）{
div.append（'Trip:'+（索引+1）+'）；
row.elements.foreach（函数（元素）{
var duration=$（'duration:'+element.duration.text+''）；
div.append（持续时间）；
});
});
$（“.results”）.append（'From:'+response.originAddresses+''）；
$（“.results”）.append（'To:'+response.destinationaddress+''）；
$（“.results”）。追加（div）；
}

输出如下所示：

function callback(response, status) {
    var div = $('<div></div>');

    response.rows.foreach(function(row, index) {
        div.append('<div>Trip: ' + (index + 1) + '</div>');
        row.elements.foreach(function(element) {
            var duration = $('<div>Duration: ' + element.duration.text + '</div>');
            div.append(duration);
        });
    });

    $(".results").append('<div>From: ' + response.originAddresses + '</div>');
    $(".results").append('<div>To: ' + response.destinationAddresses + '</div>');
    $(".results").append(div);

}

<div class="results">
    <div>From: Source Address</div>
    <div>To: Destination</div>
    <div> <!-- Repeat this block for each row in response.rows -->
        <div>Trip 1</div>
        <div>Duration: 19 hours 40 mins</div>
    </div>
    ...
    ...
</div>


发件人：源地址
收件人：目的地
行程1
持续时间：19小时40分钟
...
...
我可以看到您的json？您应该在“while”或“for”中获取数据长度和所有数据