Таблица сборки jQuery - PullRequest
Новая
       13

Таблица сборки jQuery

0 голосов
/ 27 апреля 2010

menuOrder - это пустой div 

$("#menuOrder").append('<table>');

$(menus).each(function(i, menu) {
  $("#menuOrder").append('<tr><td>');
  $("#menuOrder").append(menu.text);
  $("#menuOrder").append('</td><td>');

  if (i > 0) {
    $("#menuOrder").append('<img src="/images/_images/up.png" />');
  } else {
    $("#menuOrder").append('<img src="/images/_images/blank.png" />');
  }

  if (i < menus.length - 1) {
    $("#menuOrder").append('<img src="/images/_images/down.png" />');
  }

  $("#menuOrder").append('</td>');
  $("#menuOrder").append('</tr>');
});

$("#menuOrder").append('</table>');

этот код не работает должным образом, как я могу изменить его с минимальными итерациями?

Ответы [ 2 ]

4 голосов
/ 27 апреля 2010

Попробуйте сделать что-то вроде этого: 

var rows = [];
$(menus).each(function(i, menu) {
 var row = '<tr><td>'.menu.text.'</td><td>';

    if (i > 0) {
        row +='<img src="/images/_images/up.png" />';
    }
    else {
        row +='<img src="/images/_images/blank.png" />';
    }

    if (i < menus.length - 1) {
       row +='<img src="/images/_images/down.png" />';
    }

    row += '</td></tr>';
    rows.push(row);
});
$('<table></table>').append(rows.join('')).appendTo('#menuOrder');

Заполняет массив rows строкой, содержащей HTML для каждой строки. После завершения создания всех строк он создает объект jQuery элемента таблицы и добавляет к нему все строки. Затем он добавляет таблицу к #menuOrder.

1 голос
/ 27 апреля 2010

Обратите внимание, что с append() вы не можете сделать это: 

$("#menuOrder").append('</table>');

Вместо того, чтобы склеивать кусочки строк HTML, вы должны думать о терминах законченных DOM-узлов. Примеры допустимых аргументов для append(): 

.append($('.something'))
.append(document.createElement('div'))
.append('<div />') // automatically creates empty div element
.append('<tr><td></td></tr>') // automatically creates tr with td inside
...