条件必选jQuery格式

Question

是否有更好、更干净的方式来编写这个条件脚本?它基本上做同样的事情，除了如果cloneVar有类"之前"，它改变哪一行它正在抓取(第一个或最后一个)，并将.insertAfter更改为.insertBefore。

var cloneVar = $(this).parent().parent('.sortable');
if ($(cloneVar).hasClass('before')) {
    var cloneRow = $(cloneVar).find('.sort-group .row:first');
    $(cloneRow).clone(true).insertBefore(cloneRow)
    .addClass('add').removeClass('first')
    .find('input[type=text], textarea').val('')
    .attr('name', function(index, name) {
        return name.replace(/(d+)/, function(fullMatch, n) {
            return Number(n) + 1;
        });
    }).parent().find('input, textarea').attr('id', function(index, id) {
        return id.replace(/(d+)/, function(fullMatch, n) {
            return Number(n) + 1;
        });
    }).parent().find('.delete').removeClass('visible');
    return false;
} else {
    var cloneRow = $(cloneVar).find('.sort-group .row:last');
    $(cloneRow).clone(true).insertAfter(cloneRow)
    .addClass('add').removeClass('first')
    .find('input[type=text], textarea').val('')
    .attr('name', function(index, name) {
        return name.replace(/(d+)/, function(fullMatch, n) {
            return Number(n) + 1;
        });
    }).parent().find('input, textarea').attr('id', function(index, id) {
        return id.replace(/(d+)/, function(fullMatch, n) {
            return Number(n) + 1;
        });
    }).parent().find('.delete').removeClass('visible');
    return false;
}

Answer 1

// move this out to clean up, since you're doing the same thing in both spots
function incrementProp(index, prop) {
    return prop.replace(/(d+)/, function (fullMatch, n) {
        return Number(n) + 1;
    });
}
var cloneRow;
if (cloneVar.hasClass('before') {
    cloneRow = $(cloneVar).find('.sort-group .row:first');
    insert = "insertBefore";
} else {
    cloneRow = $(cloneVar).find('.sort-group .row:last');
    insert = "insertAfter";
}
cloneRow.clone(true)[insert](cloneRow) // dynamically call function
    .addClass('add').removeClass('first')
    .find('input[type=text], textarea').val('')
    .attr('name', incrementProp).end()
    .find('input, textarea').attr('id', incrementProp)
    .end().find('.delete').removeClass('visible');
return false;

实际问题:

• 你可以根据cloneVar是否有相关的类来动态地构建选择器。然后运行通用代码
• 使用带字符串的括号表示法来调用insertBefore/insertAfter，具体取决于新元素的位置

额外的指针:

• cloneVar/cloneRow已经是jQuery对象，所以你不需要在jQuery中再次包装
• 你可能想使用end而不是parent -它恢复到你之前调用find的集合，你不需要改变它，如果你修改你的DOM
• 你做了很多链接，但是移动替换函数可以清理它很多

Answer 2

您可以只对更改的部分执行if:

var cloneRow = $(cloneVar).find('.sort-group .row:' + 
     /* do the check here */ (cloneVar.hasClass('before') ? 'first' : 'last'));
$(cloneRow).clone(true).insertBefore(cloneRow)
.addClass('add').removeClass('first')
.find('input[type=text], textarea').val('')
.attr('name', function(index, name) {
    return name.replace(/(d+)/, function(fullMatch, n) {
        return Number(n) + 1;
    });
}).parent().find('input, textarea').attr('id', function(index, id) {
    return id.replace(/(d+)/, function(fullMatch, n) {
        return Number(n) + 1;
    });
}).parent().find('.delete').removeClass('visible');
return false;

a ?B: c语法只是

的简写

if (a) { b }; else { c };