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 encoded array。这样，所有具有class="title"的5个单元都成功填充。但第二组与class="title"没有得到填补..我做了each(function(row)重复每个行class="nm" ajax呼叫。但是这不起作用..我认为[index]在ajax之后没有被重置，因为如果我在数组中提供了超过5个成员，剩下的单元格就会填充。但我希望在每行有class="nm"后重复ajax请求并想要按照数据填充数据。

我该怎么做？

在此先感谢...

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行，并与$row.children('.title')得到.title元素。

Answer 2

如果索引变得比从AJAX调用返回的数组的大小，你将引用数组中不存在的索引。你有没有考虑在索引上使用模函数？像：

result[index % result.length] 

这应该确保你永远不会索引阵列之外，并且随着指数超过数组的大小，[索引％result.length]包裹从第一个元素重新开始。

我不完全确定这是你在找什么......？！？

Answer 3

尝试调用第二函数（结果）

之前分配此成可变我认为这在每个功能是从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]);