Как сделать этот фрагмент 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

Это зависит от того факта, что входные элементы не содержат опционных элементов, но я думаю, что это то, что вы ищете. В случае, когда нет элементов option, атрибут просто не применяется. Обратите внимание, что если вы заменяете 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, вам больше не нужно удалять элемент, потому что он уже заменен (кто-нибудь исправит меня, если я ошибаюсь). Способ сжатия - это просто способ личных предпочтений. Всегда помните о читабельности. Слишком много оптимизаций, подобных этой, может сильно усложнить поиск. Я думаю, что для размера может быть хорошим выбором и упаковщик JavaScript для производственного кода.

Answer 3

Попробуйте это:

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