我循环遍历HTML表并根据从每行读取的数据执行$ .getJSON()调用。然后我想从$ .getJSON调用中获取数据并将其插回到读取变量的行中。
然而,当我运行我的代码时,似乎执行不同步。所有更改都是在表的最后一行而不是按顺序进行的。
Here's a working jsFiddle with my code
这是我正在阅读的数据表:
<table id="isa-table">
<thead>
<tr>
<th>Date</th>
<th>Fund / Stock</th>
<th>Buy Price (£)</th>
<th>Amount</th>
<th>%</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr data-quantity="3.5071" data-symbol="B41XG30" data-type="Fund">
<td>27 Oct 15</td>
<td>VANGUARD INV UK LT LIFESTRATEGY 100 PERC EQTY</td>
<td>142.56914</td>
<td class="isa-buy-price">£500.00</td>
<td class="percentage">16%</td>
<td class="value">123</td>
</tr>
<tr data-quantity="329.8154" data-symbol="B6QQ9X9" data-type="Fund">
<td>14 Dec 15</td>
<td>BLACKROCK FM LTD JAPAN EQUITY TRACKER D ACC</td>
<td>1.51597</td>
<td class="isa-buy-price">£500.00</td>
<td class="percentage">14</td>
<td class="value">123</td>
</tr>
<tr data-quantity="402.9009" data-symbol="B23FNS4" data-type="Fund">
<td>11 Jan 16</td>
<td>THREADNEEDLE INV UK PROP TST INSTL NET ACC</td>
<td>1.24097</td>
<td class="isa-buy-price">£500.00</td>
<td class="percentage">16%</td>
<td class="value">123</td>
</tr>
</tbody>
</table>
这是我的jQuery,其中构建了URL并进行了调用:
$(".isa-buy-price").each(function () {
$row = $(this);
var quantity = $(this).parent("tr").data("quantity");
var symbol = $(this).parent("tr").data("symbol");
var type = $(this).parent("tr").data("type");
// Build URL to call YQL
var url = "";
if (type == "Fund") {
url = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%20%3D%20%22https%3A%2F%2Fwww.charles-stanley-direct.co.uk%2FViewFund%3FSedol%3D" + symbol + "%22%20and%20xpath%3D%22%2F%2F*%5B%40id%3D'key-info-lozenge'%5D%2Ftable%2Ftbody%2Ftr%5B2%5D%2Ftd%2Fstrong%2Ftext()%22&format=json&callback=";
} else {
url = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%20%3D%20%22https%3A%2F%2Fwww.charles-stanley-direct.co.uk%2FViewShare%3FSedol%3D" + symbol + "%22%20and%20xpath%3D%22%2F%2F*%5B%40id%3D'price'%5D%2Ftbody%2Ftr%2Ftd%5B1%5D%22&format=json&callback=";
}
$.getJSON(url, function (json) {
// Set the variables from the results array
var result = "";
if (type == "Fund") {
result = json.query.results.replace(/\s/g, '');
} else {
result = json.query.results.td.content.replace(/\s/g, '');
}
success: {
$row.siblings(".value").text("£" + result);
}
});
});
我有点不知所措。任何人都可以告诉我为什么请求这样的命令不正常吗?
答案 0 :(得分:1)
脚本中的问题不是因为执行的顺序,而是因为$row
变量。
您已将其创建为全局变量,因此循环的每次迭代都会将其值覆盖到最新的行,因此在循环结束时它将引用最后一行,现在当ajax请求完成时他们打电话给$row.siblings(".value").text("£" + result);
它会更新最后一行。
相反,您需要将$row
声明为each()
回调函数的局部变量,以便循环的每次迭代都有自己的变量副本。
$(".isa-buy-price").each(function() {
var $row = $(this);
var quantity = $(this).parent("tr").data("quantity");
var symbol = $(this).parent("tr").data("symbol");
var type = $(this).parent("tr").data("type");
// Build URL to call YQL
var url = "";
if (type == "Fund") {
url = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%20%3D%20%22https%3A%2F%2Fwww.charles-stanley-direct.co.uk%2FViewFund%3FSedol%3D" + symbol + "%22%20and%20xpath%3D%22%2F%2F*%5B%40id%3D'key-info-lozenge'%5D%2Ftable%2Ftbody%2Ftr%5B2%5D%2Ftd%2Fstrong%2Ftext()%22&format=json&callback=";
} else {
url = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%20%3D%20%22https%3A%2F%2Fwww.charles-stanley-direct.co.uk%2FViewShare%3FSedol%3D" + symbol + "%22%20and%20xpath%3D%22%2F%2F*%5B%40id%3D'price'%5D%2Ftbody%2Ftr%2Ftd%5B1%5D%22&format=json&callback=";
}
$.getJSON(url, function(json) {
// Set the variables from the results array
var result = "";
if (type == "Fund") {
result = json.query.results.replace(/\s/g, '');
} else {
result = json.query.results.td.content.replace(/\s/g, '');
}
$row.siblings(".value").text("£" + result);
});
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped" id="isa-table">
<thead>
<tr>
<th>Date</th>
<th>Fund / Stock</th>
<th>Buy Price (£)</th>
<th>Amount</th>
<th>%</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr data-quantity="3.5071" data-symbol="B41XG30" data-type="Fund">
<td>27 Oct 15</td>
<td>VANGUARD INV UK LT LIFESTRATEGY 100 PERC EQTY</td>
<td>142.56914</td>
<td class="isa-buy-price">£500.00</td>
<td class="percentage">16%</td>
<td class="value">123</td>
</tr>
<tr data-quantity="329.8154" data-symbol="B6QQ9X9" data-type="Fund">
<td>14 Dec 15</td>
<td>BLACKROCK FM LTD JAPAN EQUITY TRACKER D ACC</td>
<td>1.51597</td>
<td class="isa-buy-price">£500.00</td>
<td class="percentage">14</td>
<td class="value">123</td>
</tr>
<tr data-quantity="402.9009" data-symbol="B23FNS4" data-type="Fund">
<td>11 Jan 16</td>
<td>THREADNEEDLE INV UK PROP TST INSTL NET ACC</td>
<td>1.24097</td>
<td class="isa-buy-price">£500.00</td>
<td class="percentage">16%</td>
<td class="value">123</td>
</tr>
</tbody>
</table>
&#13;