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

Question

I have a code that seems to be not optimal. I would like to reduce content of Reorder function to single jquery function. It can be done simpler or maybe this is a good approach?

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

Here is a little bit optimized version:

$(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;
    });
});

• Cache your jquery objects to avoid re-querying all the time the same thing: $('#sortable')

• No need to use .attr(string, function) to simply concatenate a string, use .attr('name', 'middle' + (inputIndex-1))

• jquery is about chaining, abuse it: $inputs.filter().attr().end().filter().attr()

I've made this fiddle to illustrate.

---

Event more optimized :o)

You could also write your Reorder() function this way. Seems a bit 'stupid' to loop and then re-filter again. Do everything in the loop:

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

There is not much wrong with your existing Reorder function. You could very slightly improve it like so:

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");
}

That reduces the number of look-ups of #sortable input from three to one.

You could also leave out the variable declaration and just string it all together, like so:

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");
}

Personally, I find that a bit harder to read than the previous example.