jQuery 以正确的顺序插入元素 vs detach().sort()？

Question

假设我有以下 html 结构：

<ul>
  <li>1</li>
  <li>2</li>
  <li>4</li>
</ul>

是否可以（以及如何）以正确的顺序插入新元素

3

而不分离元素和手段？原因是，我相信如果您 .detach() 和 .append() 元素，您将导致页面回流（我认为如果元素移动，无论如何都会发生）。但由于某种原因，与追加/分离/排序/追加相比，将其插入正确的位置似乎更干净。

我已经在 jQuery 中看到了 nth-child 选择器，并且我也在使用 underscore.js 框架（它提供了 _.sortedIndex ，它告诉我元素的正确位置），但我可以似乎没有找到将其放入其中的正确方法。

一些背景： 我正在使用backbone.js，并且我有一个项目集合。然后我假设我需要集合的视图（或集合中每个项目的视图？）。当我向集合中添加元素时，我设置了比较器，因此集合已正确排序，但页面上的视图未排序。

对于那些通过谷歌到达这里的人，这是我最终在backbone.js中想到的：

Item = Backbone.Model.extend({});

ItemList = Backbone.Collection.extend({
    model: Item,

    comparator: function(item) {
        return item.get('id');
    }
});

ItemView = Backbone.View.extend({
    tagName: 'li',
    className: 'item',

    initialize: function() {
        _.bindAll(this, 'render');
        this.model.bind('change', this.render);
        this.model.view = this;
    },

    render: function() {
        $(this.el).text(this.model.get('name'));
        return this;
    }
});

App = Backbone.View.extend({
    el: $('#mylist'),

    initialize: function() {
        _.bindAll(this, 'add_one', 'add_all', 'render');

        this.items = new ItemList();
        this.items.bind('add', this.add_one);
        this.items.bind('refresh', this.add_all);
        this.items.bind('all', this.render);

        this.items.add(new Item({id: 2, name: 'two'}));
        this.items.add(new Item({id: 5, name: 'five'}));
        this.items.add(new Item({id: 1, name: 'one'}));
        this.items.add(new Item({id: 4, name: 'four'}));
        this.items.add(new Item({id: 3, name: 'three'}));        
        this.items.add(new Item({id: 6, name: 'six'}));
        this.items.add(new Item({id: 5.5, name: 'five.five'}));
    },

    add_one: function(item) {
        var view = new ItemView({model: item});
        var visible = this.$(view.tagName+'.'+view.className);
        var newel = view.render().el;
        var idx = this.items.indexOf(item);
        if (visible.length == idx) {
            $(this.el).append(newel);
        }
        else {
            visible.eq(idx).before(newel);
        }
    },

    add_all: function() {
        this.items.each(this.add_one);
    }
});

app = new App();

在这里运行它： http:// /jsfiddle.net/dlamotte/L4j3b/

Answer 1

你可以使用 jQuery

$('li').eq(1).after('<li>3</li>');

fiddle 页面： http://jsfiddle.net/Hrjks/

更好的是：

var myindex = 3;
var insertPoint = myindex -2;
$('li').eq(insertPoint).after('<li>' + myindex +'</li>');

fiddle ：http://jsfiddle.net/Hrjks/1/

Answer 2

我最近遇到了同样的问题，我用以下函数修复了。

function sortInsert(parent, element, fnc) {
    var stack = parent.children().filter(function() {
        return fnc($(this), element) > 0;
    });       
    if (stack.length == 0) {
        parent.append(element);
    } else {
        stack.first().before(element);
    }
}

sortInsert($('ul'), $('<li>1</li>'), function(e, a) { 
    return parseInt(e.html()) - parseInt(a.html()); 
} );​

它基本上是获取父级的所有子级，然后执行过滤器。如果您只需要比较它的值，您可以通过避免回调来简单地做到这一点，但在我的情况下，这是需要的，因为我按几个标准进行排序。

如果您想按降序排序，只需将 append 替换为 prepend，将 before 替换为 last 和 last 的第一个 应该可以工作。

欢迎在我的游乐场玩：http://jsfiddle.net/crodas/FMEkb/5/