javascript - jQuery AJAX 每个都没有按预期迭代

Question

我正在使用 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 编码数组。这样，所有 5 个具有 class="title" 的单元格都已成功填充。但是带有 class="title" 的第二组没有被填满。

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

我该怎么做？

Answer 1

$('.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引用每个 <tr class="nm">行和 $row.next().next()将选择第二个下一个兄弟，这是包含 .title 的行元素。
如果您更改结构，它将中断。

如果您给出包含 .title 的行会更好元素自己的类:

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

然后你可以迭代那些而不是 .nm行，并得到 .title带有 $row.children('.title') 的元素.