이 jQuery 스 니펫을 더 소형으로 만드는 방법은 무엇입니까?

Question

$selectMenus = $("#experiences").find('select'); 

$tab.find('input').each(function(i) { 
    var $elem = $(this); 
    var value = $elem.attr('value'); 
    if(!value) 
     value = ' '; 
    $parent = $elem.parent(); 
    $elem.remove(); 
    $parent.html(value); 
}); 

$tab.find('select').each(function(i) { 
    $('option', this)[$selectMenus[i].selectedIndex].selected = true; 
    var $elem = $(this); 
    var value = $elem.attr('value'); 
    if(!value) 
     value = ' '; 
    $parent = $elem.parent(); 
    $elem.remove(); 
    $parent.html(value); 
}); 

두 개는 거의 같습니다.

Answer 1

이것은 입력 요소에 옵션 요소가 포함되어 있지 않다는 사실에 달려 있지만, 사용자가 찾고있는 요소라고 생각합니다. 옵션 요소가없는 경우 속성은 단순히 적용되지 않습니다. 부모 요소의 HTML을 대체 할 경우 DOM에서 자식 요소를 명시 적으로 제거 할 필요가 없습니다.

var elems = $tab.find('input, select'); 
elems.each(function() { 
    var $elem = $(this); 
    var i = elems.filter('select').index($elem); 
    $(elem).find('option') 
      .eq($selectMenus[i].selectedIndex) 
      .attr('selected','selected'); 

    var value = $elem.val(); 
    if(!value) value = ' '; 
    $elem.parent().html(value); 
}); 

Answer 2

이 시도 :

function doSomething(elem) 
{ 
    var value = $(elem).attr('value') ? $(elem).attr('value') : ' '; 
    $(elem).parent().html(value); 
} 

$tab.find('input').each(function(i) { 
    doSomething(this); 
}); 

$tab.find('select').each(function(i) { 
    $('option', this)[$selectMenus[i].selectedIndex].selected = true; 
    doSomething(this); 
}); 

이미 부모가 이미 얻었 기 때문에 더 이상 요소를 제거 할 필요는 없습니다 HTML로 교체하면 내 생각 :

var i = 0; 
$tab.find('input, select').each(function() { 
    var $elem = $(this); 

    if (this.tagName == 'select') 
     $elem.val($selectMenus[i++].selectedIndex) 

    var value = $elem.val(); 

    $elem.parent().html(value ? value : ' '); 
}); 

Answer 3

가 잘 나는이 optimzation을 볼 수 있었다 내가 잘못하면 누구든지 나를 바꿔 치기한다. 압축하는 방법은 개인적인 취향의 한 방법 일뿐입니다. 가독성을 항상 염두에 두십시오. 이와 같은 최적화가 너무 많으면 파헤칠 수 없을 수도 있습니다. 나는 크기 때문에, 프로덕션 코드를위한 자바 스크립트 패커가 좋은 선택 일 것이라고 생각한다.