페이지에 jQuery 요소의 배열을 삽입하는 가장 좋은 방법

Question

페이지에 jQuery 요소의 배열을 추가하는 가장 좋은 방법은 무엇입니까?

직설 형 HTML 태그를 추가하는 경우 배열로 함께 수집 한 다음 배열을 추가해야한다는 것을 알고 있습니다. 이것은 가장 빠른 방법입니다. 그러나 나는 문자열을 함께 연결할 수 없도록 이벤트를 생성 한 jQuery 요소 컬렉션을 보유하고 있습니다.

예 : 그것은 두 개의 루프를 필요하기 때문에

 function displayCommentActions(actions) { 
      var html = []; 
      module.$element.find('.comments .actions li').remove(); 
      $.each(actions, function(key, value) { 
       html.push($('<li class="' + key + '"><a href="#">' + value.name + '</a></li>').bind({ 
        click: function(event) { 
         alert('found click'); 
        } 
       })); 
      }); 
      $.each(html, function(count, item) { 
       module.$element.find('.comments .actions').append(item); 
      }) 
     }; 

이 못생긴입니다. 하나는 jQuery 객체를 생성하고 하나는 페이지에 출력한다. 코드를 개선하려면 어떻게해야합니까?

Answer 1

@efritz 모든 목록 항목에서 .remove()를 수행하는 것이 느리고 비용이 많이 들지만 목록 항목을 빠르게 지우는 것은 .empty()입니다.

@Samuel 여기서 반복을 피할 수는 없습니다. .append()는 문자열 (html) 또는 jquery 객체를 취합니다. jquery 객체 배열을 사용할 수 없습니다.

var actionsList = module.$element.find('.comments .actions'); 
actionsList.empty() // Remove all contents of our <UL> 
$.each(actions, function(class, value) { 
    var listItem = $('<li />').addClass(class) // Create our <li> and add our class 
     .append('<a href="javascript:void(0);">' + value.name + '</a>') // Add our link 
     .click(function() { // Click bind event 
      alert('Clicked item'); 
     }); 

    actionsList.append(listItem); // Add our <li> to our <ul> 

} 

이것은 아마 당신이 사뮤엘에게 가져다 줄만큼 작을 것입니다. 적어도 듀얼 루프의 개선점입니다.

Answer 2

이 기능이 작동하지 않습니까?

function displayCommentActions(actions) { 
    var target = module.$element.find('.comments .actions li') 
    target.remove(); 

    $.each(actions, function(k, v) { 
     var item = $('<li />').addClass(key); 

     var link = $('<a />') 
      .attr('href', 'javascript:void(0);') 
      .html(value.name) 
      .click(function() { 
       alert('found click'); 
      }); 

     elem.append(item); 
     target.append(item); 
    } 
} 

또한 반복적 인 선택기는 값 비쌉니다. 가능하면 반복적으로 선택기를 저장하십시오.