我的代码似乎不是最优的。我想将 Reorder 函数的内容减少到单个 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;
});
});
演示:jsfiddle
最佳答案
这里是一个稍微优化过的版本:
$(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;
});
}
关于javascript - 如何优化和减少此函数中对 jQuery 的调用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8314637/