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("&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文件填充，其中包含5个成员的json encoded array。通过这种方式，成功填充了class="title"的所有5个单元格。但是class="title"的第二个集合没有被填充..我为each(function(row)的每一行重复ajax调用class="nm"。但这不起作用..我认为[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("&nbsp;");
            }
        });
    });
});

这应该适用于您提供的结构。 $row引用每个<tr class="nm">行，$row.next().next()将选择第二个下一个兄弟，即包含.title元素的行。
如果你改变结构，它会破裂。

如果您将包含.title元素的行赋予其自己的类：

，那会更好

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

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

Answer 2

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

result[index % result.length]

这应该确保你永远不会在数组之外索引，并且当索引超过数组的大小时，[index％result.length]会再次从第一个元素开始包装。

我不完全确定这是否是您正在寻找的......？！？

Answer 3

尝试在调用第二个函数（结果）之前将THIS分配给变量

我认为每个函数的这个函数与函数（结果）中的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]);

jQuery AJAX的每个问题

3 个答案: