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

Question

I am using jQuery and I have script as below;

$(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(" ");
          }
      });
  },
});
});
});

The script is suppose to change text in my table;

<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>

As you can see, the table has 6 rows, and it is in a 3 - row repeating format. The contents are filled by a test.php file which echos a JSON encoded array containing 5 members. In this way, all 5 cells having class="title" get populated successfully. But the second set with class="title" is not getting filled.

I made a each(function(row) to repeat the ajax call for every row having class="nm" . But this is not working. I think the [index] is not getting reset after ajax, because the remaining cells are populating if I provide more than 5 members in array. But I want the ajax request to repeat after every row having class="nm" and want to fill the data accordingly.

How can I do this?

Answer 1

$('.title') always selects every .title element. You are not restricting the set to any particular one. You have to make the selector dependent on .nm somehow.

For example:

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

This should work with the structure you provided. $row references each <tr class="nm"> row and $row.next().next() will select second next sibling, which is the row that contains the .title elements.
It will break if you change the structure.

It would be better if you give the rows containing the .title elements their own class:

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

Then you can iterate of those instead of the .nm rows, and get the .title elements with $row.children('.title') .

Answer 2

If your index gets larger than the size of the array returned from your AJAX call, you will refer to an index not present in the array. Have you considered using a modulo function on the index? Like:

result[index % result.length]

This should make sure that you never index outside of the array, and that as the index exceeds the size of the array, the [index % result.length] wraps to start from the first element again.

I am not entirely sure if this is what you are looking for... ?!?

Answer 3

Try assigning THIS into a variable before calling the second function (result)

I think THIS on each function is different from the THIS in the function(result)

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]);