Question

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

$tab.find('input').each(function(i) {
    var $elem = $(this);
    var value = $elem.attr('value');
    if(!value)
        value = '&nbsp;';
    $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 = '&nbsp;';
    $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

试试这个：

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

我可以看到这种优化：

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打包器也可能是一个不错的选择。

如何使这个jQuery片段更紧凑？

3 个答案: