jQuery AJAX each未按预期迭代

Question

jQuery AJAX each未按预期迭代

3

我正在使用jQuery，以下是我的脚本代码；

$(document).ready( function() {
$('.nm').each(function(row) {
$.ajax({
    type: 'POST',
    url: 'test.php',
    data: 'id=' + 1,
    dataType: 'json',
    cache: false,
    success: function(result) {
    $('.title').each(function(index){
      if (result) {

        $(this).html(result[index]);

        } else {
          $(this).html("&nbsp;");
          }
      });
  },
});
});
});

该脚本应该更改我的表格中的文本；

<tr class="nm" style="height: 30px">
        <td style="width: 15px;">&nbsp;</td>
        <td class="section" colspan="5">Mix</td>
        <td style="width: 15px;">&nbsp;</td>
    </tr>
    <tr>
        <td id="prev" rowspan="2"><<</td>
        <td class="content">&nbsp;</td>
        <td class="content">&nbsp;</td>
        <td class="content">&nbsp;</td>
        <td class="content">&nbsp;</td>
        <td class="content">&nbsp;</td>
        <td id="next" rowspan="2">>></td>
    </tr>
    <tr>
        <td class="title" >&nbsp;</td>
        <td class="title" >&nbsp;</td>
        <td class="title" >&nbsp;</td>
        <td class="title" >&nbsp;</td>
        <td class="title" >&nbsp;</td>
    </tr>


    <tr class="nm" style="height: 30px">
        <td style="width: 15px;">&nbsp;</td>
        <td class="section" colspan="5">Mix</td>
        <td style="width: 15px;">&nbsp;</td>
    </tr>
    <tr>
        <td id="prev" rowspan="2"><<</td>
        <td class="content">&nbsp;</td>
        <td class="content">&nbsp;</td>
        <td class="content">&nbsp;</td>
        <td class="content">&nbsp;</td>
        <td class="content">&nbsp;</td>
        <td id="next" rowspan="2">>></td>
    </tr>
    <tr>
        <td class="title" >&nbsp;</td>
        <td class="title" >&nbsp;</td>
        <td class="title" >&nbsp;</td>
        <td class="title" >&nbsp;</td>
        <td class="title" >&nbsp;</td>
    </tr>

如您所见，表格有6行，且以3行重复格式排列。内容由test.php文件填充，该文件输出JSON编码的数组，包含5个成员。通过这种方式，所有5个使用class="title"的单元格都被成功填充了。但是具有class="title"的第二个集合未被填充。

我使用each(function(row))对每个使用class="nm"的行重复了ajax调用。但是这不起作用。我认为[index]在ajax后没有被重置，因为如果我提供超过5个成员的数组，则其余单元格将被填充。但我希望在每个使用class="nm"的行之后重复ajax请求，并相应地填充数据。

我该怎么办？

- Alfred

3个回答

1

如果您的索引大于从AJAX调用返回的数组大小，则会引用数组中不存在的索引。您是否考虑在索引上使用模函数？例如：

result[index % result.length]

这应该确保您永远不会索引到数组外部，并且随着索引超出数组大小，[index％result.length]将从第一个元素重新开始。

我不完全确定这是否是您要寻找的... ?!?

- Jakob Jenkov

0

尝试在调用第二个函数（result）之前将THIS赋值给变量。

我认为每个函数中的THIS与函数（result）中的THIS不同。

each(function(row) {
$.ajax({
type: 'POST',
url: 'test.php',
data: 'id=' + 1,
dataType: 'json',
cache: false,
success: function(result) {
$('.title').each(function(index){
  if (result) {

    $(this).html(result[index]);

- DAEMYO

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Felix Kling · Accepted Answer

$('.title')总是选择所有.title元素。您没有将集合限制为任何特定元素。您必须以某种方式使选择器依赖于.nm。

例如：

$('.nm').each(function() {
   var $row = $(this);
    $.ajax({
        type: 'POST',
        url: 'test.php',
        data: 'id=' + 1,
        dataType: 'json',
        cache: false,
        success: function(result) {
            var $titles = $row.next().next().children('.title');
            if (result) { // it's enough to check *once* whether it is set
                $titles.html(function(index){ // easier
                    return result[index];
                });
            }
            else {
               $titles.html("&nbsp;");
            }
        });
    });
});

这应该可以使用您提供的结构。 $row 引用每个 <tr class="nm"> 行，$row.next().next() 将选择第二个下一个同级元素，也就是包含 .title 元素的行。
如果更改结构，它将会出现错误。

如果您为包含 .title 元素的行指定自己的类，则会更好：

<tr class="something">
    <td class="title" >&nbsp;</td>
    <!-- ... -->
</tr>

然后，您可以迭代这些元素而不是.nm行，并使用$row.children('.title')获取.title元素。