jQuery를 내가 최소한의 반복으로 변경하는 방법,

Question

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

이 코드가 제대로 작동하지 않습니다 테이블 구축? 이 같은 일을

Answer 1

봅니다 :

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

이 각 행의 HTML을 포함하는 문자열로 rows 배열을 채 웁니다. 모든 행을 만들면 테이블 요소의 jQuery 객체를 만들고 모든 행을 그 행에 추가합니다. 그런 다음 표를 #menuOrder에 추가합니다. append()으로이 작업을 수행 할 수없는

Answer 2

참고 :

이

$("#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