더 효율적인 jquery

다음 코드 조각이 작동하지만, 브라우저가 약간 복잡해집니다. 전공이 없습니다. 더 효율적으로 만들 수있는 방법이 있을지 궁금합니다. 캐싱을 사용하거나 어떻게 든 하나의 선택 물을 채운 다음 다른 물체로 복사 할 수 있습니까? (페이지에 '마스크'클래스가있는 6 개의 드롭 다운이 있습니다.)더 효율적인 jquery

어떤 도움을 주시면 감사하겠습니다!

$('.mask').each(function() { 
    $(this).append($('<option/>').val("").text("")); 
    for (var i = 1; i < 256; i++) { 
     $(this).append($('<option/>').val(i).text(i)); 
    } 
    }); 
});

출처

2010-12-22 Kyle Rogers

당신은 같이 그들을 복제 번 다음 노드를 만들 수 있습니다

var temp = $('<select/>'); 
$('<option/>').val("").text("").appendTo(temp); 
for (var i = 1; i < 256; i++) { 
    $('<option/>').val(i).text(i).appendTo(temp); 
} 
temp.children().clone().appendTo('.mask');

를 대신 개인의 많은 일의이 모든 요소를 일괄 처리 (이 매우 비용이 많이 드는)가 DOM에 추가 문서 조각에 다음을 복제하고 일괄 적으로 추가합니다 (선택 당 하나의 배치).

출처

2010-12-22 21:30:12

위의 해결책만큼 빠르지는 않지만 왜 이것이 선호되는지 자세히 설명해 줄 수 있습니까? –

@Kyle - 노드의 DOM 생성을 사용하는 것이 더 안전합니다 (예 : 값의 따옴표 등) (*이 특별한 경우 * 안전) 문제, 잘못된 HTML 및 예측할 수없는 렌더링이 발생할 수 있습니다. 안전을 위해 문자열 생성을 통한 HTML이 아닌 DOM 생성 방법을 고수하십시오. –

그것의 훨씬 더 빨리 (3-10 주위 시간, here을 시험) 단일 문자열에 HTML 자신을 구축 :

var html = "<option value=''></option>"; 
for (var i = 1; i < 256; i++) { 
    html += "<option value='" + i + "'>" + i + "</option>"; 
} 
$(".mask").append(html);

이 글의 현재 옵션을 비교

참조 성능 테스트 : http://jsperf.com/appending-options-jquery

출처

2010-12-22 22:51:07

이것은 분명히 해결책이 빠르지 만 모든 사람이 선호하는 것 같지 않습니다. 누군가이 아래의 해결책만큼 좋지 않은 이유를 자세히 설명해 줄 수 있습니까? –

더 효율적인 jquery

답변

관련 문제