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”的集合没有被填满..我对每个具有class =“ nm”的行都做了一个each(function(row)来重复ajax调用.但这是行不通的. [index]在ajax之后不会重置,因为如果我在数组中提供了5个以上的成员,则剩余的单元格将在填充. ..

我怎样才能做到这一点？？

提前致谢…

解决方法:

$(‘.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和$row.next().next()将选择第二个下一个同级,即包含.title元素的行.
如果更改结构,它将损坏.

如果将包含.title元素的行赋予自己的类,那就更好了：

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

然后,您可以迭代这些行而不是.nm行,并使用$row.children(‘.title’)获得.title元素.