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 строк и имеет трехстрочный повторяющийся формат. Содержимое заполняется файлом test.php, который повторяет json encoded array, содержащий 5 членов. Таким образом, все 5 ячеек, имеющих class="title", успешно заселяются. Но второй набор с 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(" ");
            }
        });
    });
});

Это должно работать с предоставленной вами структурой. $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

Попробуйте присвоить ЭТО переменной, прежде чем вызывать вторую функцию (результат)

Я думаю, что ЭТО в каждой функции отличается от ЭТОГО в функции (результат)

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