간단한 jQuery를 다음 소스 사용하여 텍스트 상자

Question

에 여러 값을 추가 :

• 에

  <div id="addons"> 
      <div class="addon"> 
       <span class="title"><input type="checkbox" value="addon_1" name="Item 1 title"></span> 
       <span class="cost">$<em>20</em></span> 
      </div> 
      <div class="addon"> 
       <span class="title"><input type="checkbox" value="addon_2" name="Item 2 title"></span> 
       <span class="cost">$<em>45</em></span> 
      </div> 
      <div class="hidden" id="summaries"> 
       <input name="addons_titles" id="addons_titles" type="text" value=""><!-- on checkbox click, add item titles --> 
       <input name="addons_cost" id="addons_cost" type="text" value=""><!-- on checkbox click, total item cost --> 
      </div> 
  </div><!-- end addons --> 
  

  내가 노력하고있어에서 제목 요약 ".title 입력 .addon 을 [이름]" ~ 입력 #addons_titles (각 제목은 파이프 문자로 구분됨 - 예 : "Item 1 title | Item 2 title")

• 및 총 항목 비용은 ".addon .cost이 그들을 "입력 #의 addons_cost 에

어떤 생각 많이 감사합니다 - 감사합니다!

Answer 1

타일 :

var result = ''; 
$(".addon .title input").each(function(i, n) { 
    result += (result.length > 0 ? "|" : "") + $(n).attr("name"); 
}); 

합계 :

var sum = 0; 
$(".addon .cost em").each(function(i, n) { 
    sum += parseInt($(n).text()); 
}); 

설정 값 : 닉 Craver이 우리 제안

$('#addon_titles').val(result); 
$('#addon_cost').val(sum); 

배열을 만들고 배열에 항목을 밀어 넣으면 성능이 향상됩니다.

var startTime, endTime, i, result; 

startTime = new Date().getTime(); 
for (i = 1; i < 50000; ++i) { 
    result = ''; 
    $(".addon .title input").each(function(i, n) { 
     result += (result.length > 0 ? "|" : "") + $(n).attr("name"); 
    }); 
} 
endTime = new Date().getTime(); 
$("#method1").html('Method 1: ' + ((endTime - startTime)) + ' ms.'); 

startTime = new Date().getTime(); 
for (i = 1; i < 50000; ++i) { 
    result = new Array(); 
    $(".addon .title input").each(function() { 
     result.push($(this).attr("name")); 
    }); 
    $('#addon_titles').val(result.join('|')); 
} 
endTime = new Date().getTime(); 
$("#method2").html('Method 1: ' + ((endTime - startTime)) + ' ms.'); 

이 시험은 처음 밝혀졌다 : 일반적으로, 배열을 만드는 그것으로 항목을 밀어하고 함께 항목에 합류함에 따라, 나는 다음과 같은 테스트를 실행 한 구체적인 수치는 제가 흥미로웠다 작은 오버 헤드를 incurrs 메서드 (문자열 연결)는 4926 밀리 초, 두 번째 메서드는 10359 밀리 초가 걸렸습니다. 모든 테스트는 영업 부서에 제공된 샘플 데이터를 기반으로합니다.

그런 다음 두 번째 방법의 중단 점이 무엇인지 궁금해서 입력 필드의 수를 늘 렸습니다. 휴식 시간도 약 24 항목입니다.

따라서 결론적으로 적은 수의 항목이있는 경우 연결을 사용하면 성능이 향상되지만 24를 초과하면 배열을 사용하는 것이 더 좋습니다.

Answer 2

Obalix는 크게 이렇게 성능을 향상시킬 수 있습니다,하지만 타일에, 그것은 올바른 있습니다

var result = new Array(); 
$(".addon .title input").each(function() { 
    result.push($(this).attr("name")); 
}); 
$('#addon_titles').val(result.join('|')); 

벤치마킹은 항상 재미 있기 때문에 당신이 jQuery를 찍을 때, 여기에 문자열 연결 대 성능 어레이의 또 다른 시험,의 당신이 실제로 다르다 부분을 비교하고, 그래서 방정식 중 선택 성능 :이 기계에

$(function(){ 
    var startTime, endTime, i, result; 

    startTime = new Date().getTime(); 
    result = ''; 
    for (i = 1; i < 5000000; ++i) { 
     result += (result.length > 0 ? "|" : "") + "attribute"; 
    } 
    endTime = new Date().getTime(); 
    $("#method1").html('Method 1: ' + ((endTime - startTime)) + ' ms.'); 

    startTime = new Date().getTime(); 
    result = new Array(); 
    for (i = 1; i < 5000000; ++i) { 
     result.push("attribute"); 
    } 
    result.join('|'); 
    endTime = new Date().getTime(); 
    $("#method2").html('Method 2: ' + ((endTime - startTime)) + ' ms.');   
    }); 

, 방법 1 : 3715 MS, 방법 2 : 927 MS. 이 경우 선택기에 따라 달라집니다 ... 대부분의 경우 동의하지만, 항목 목록을 처리하는 경우 처음부터 확장하는 방식으로 수행하는 것이 좋습니다. (물론 성장할 가능성이 있다고 가정하십시오)