Question

我的代码似乎不是最佳的。我想将重新排序功能的内容减少到单个jquery函数。它可以做得更简单，也许这是一个很好的方法？

HTML：

<div id="sortable">
     <div class="i">
        @<input type="text" name="first" value="" />
     </div>
    <div class="i">
        @<input type="text" name="last" value="" />
    </div>
</div>
<a href="#" id="add_input">Add</a>

JS：

$(function(){
    $("#sortable").sortable({
        containment: "document",
        axis: "y",
        update: Reorder,
    });
    function Reorder()
    {        
        $("#sortable input").attr("name", function(i){
            //if(i==0){return "first";}
            //else{return "waypoint" + (i + 1); }
            return "middle" + i;
        });
        $("#sortable input:first").attr("name", "first");
        $("#sortable input:last").attr("name", "last");
    }
    $("#add_input").click(function () {
        var inputIndex = $("#sortable > .i").length;

        $("#sortable input:last").attr("name", function(){
            return "middle" + (inputIndex - 1);
        });

        if(inputIndex>1){
            var html = '<div class="i">';
            html += '@<input type="text" name="last" value="" /> ';
        }

        $("#sortable").append(html); 
        return false;
    });
});

DEMO：jsfiddle

Answer 1

这是一个稍微优化的版本：

$(function(){

    var $sortable = $('#sortable');

     $sortable.sortable({
        containment: "document",
        axis: "y",
        update: Reorder,
    });

    function Reorder()
    {        
        var $inputs = $sortable.find('input');
        $inputs.each(function(i, elm) {
            this.name = 'middle' + i;
        });
        $inputs
            .filter(':first').attr('name', 'first')
            .end()
            .filter(':last').attr('name', 'last');
    }

    $("#add_input").click(function () {

        var inputIndex =  $sortable.children(".i").length;

        $sortable.find('input:last').attr('name', 'middle' + (inputIndex-1));

        if( inputIndex > 1)
        {
            $('<div class="i">@<input type="text" name="last" value="" /></div>')
                .appendTo($sortable);
        }

        return false;
    });
});

缓存你的jquery对象，以避免一直重新查询同一件事：$('#sortable')
无需使用.attr(string, function)简单地连接字符串，请使用.attr('name', 'middle' + (inputIndex-1))
jquery是关于链接，滥用它：$ inputs.filter（）。attr（）。end（）。filter（）。attr（）

我已将此fiddle作为说明。

事件更加优化：o）

你也可以用这种方式编写你的Reorder（）函数。似乎有点'愚蠢'循环然后再次重新过滤。在循环中做所有事情：

function Reorder()
{        
    var $inputs = $sortable.find('input');

    $inputs.each(function(i, elm) {
        this.name = i == 0
            ? 'first'
            : i == ($inputs.length-1)
                ? 'last'
                : 'middle' + i;
    });
}

Answer 2

现有的重新排序功能没有太大问题。你可以像这样稍微改进一下：

function Reorder() {
    var sortableInput = $("#sortable input");
    sortableInput.attr("name", function(i) {
        //if(i==0){return "first";}
        //else{return "waypoint" + (i + 1); }
        return "middle" + i;
    });
    sortableInput.filter(":first").attr("name", "first");
    sortableInput.filter(":last").attr("name", "last");
}

这会将#sortable input的查找次数从三次减少到一次。

您也可以省略变量声明并将它们全部串在一起，如下所示：

function Reorder() {
    $("#sortable input").attr("name", function(i) {
        //if(i==0){return "first";}
        //else{return "waypoint" + (i + 1); }
        return "middle" + i;
    }).filter(":first").attr("name", "first").end().filter(":last").attr("name", "last");
}

就我个人而言，我发现比上一个例子更难阅读。

如何在此函数中优化和减少对jQuery的调用？

2 个答案: