Javascript jQuery-AJAX没有按预期进行迭代

我正在使用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(" ");
          }
      });
  },
});
});
});

假设脚本更改我的表中的文本

<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文件填充，该文件回显包含5个成员的JSON编码数组。这样，所有具有

class=“title”

的5个单元格都将成功填充。但是第二组

class=“title”

没有填充

我做了一个

each（function（row）

，为每一行

class=“nm”

重复ajax调用。但是这不起作用。我认为

[index]

在ajax之后不会被重置，因为如果我在数组中提供了5个以上的成员，剩余的单元格将被填充。但是我希望ajax请求在每行具有

class=“nm”

之后重复，并希望相应地填充数据

---

如何执行此操作？

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

result[index % result.length]

这应该确保您永远不会在数组之外建立索引，并且当索引超过数组的大小时，[index%result.length]会重新包装以从第一个元素开始

---

我不完全确定这是否是您要查找的…？！？

在调用第二个函数（result）之前，请尝试将其赋给变量

我认为每个函数上的这一点与函数（结果）中的这一点不同

$（'.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(" ");
            }
        });
    });
});

这应该适用于您提供的结构。

$row

引用每个

行和

$row.next（）。next（）

将选择第二个下一个同级，即包含

.title

元素的行。
如果你改变结构，它就会破裂

如果您为包含

.title

元素的行指定其自己的类，则会更好：

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

---

然后，您可以迭代这些元素而不是

.nm

行，并使用

$row.children（'.title'）

嗨，您能用您的第二个建议给我一把小提琴吗？给一个id（

idaa

和

idbb

）而不是类：）@blasteralfred：我不是说

id

s；）这里的课比较好。代码是一样的，但不是

$（'.nm'）。每个（function（）{

你做的

$（'.something'）。每个（function（）{

和而不是

$row.next（）.next（）.children（'.title'）

，$row.children（'.title'）`。你能给我做一把小提琴吗？？）我是初学者（@blasteralfred:这里我没有提出Ajax请求，但我希望你能明白。嗨，felix，从你的第一个回答来看，一切都很好，但我有一个Ajax请求，旨在更改标题单元格上方相应单元格的背景图像，标题单元格有

class=“content”

。我想执行ajax请求以更改bg图像。您可以在这里看到我的代码

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