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

Question

假设我有以下 html 结构:

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

是否可以(以及如何)插入一个新元素 <li>3</li>以正确的顺序不分离元素并求助？原因是，我相信如果你 .detach() 和 .append() 元素，你将导致页面重排(我想如果元素四处移动，无论如何都会发生)。但出于某种原因，将它插入正确的位置似乎比附加/分离/排序/附加更干净。

我在 jQuery 中看到了第 nth-child 选择器，我也在使用 underscore.js 框架(它提供了 _.sortedIndex 告诉我元素的正确位置)，但我似乎无法想出把它放在那里的正确方法。

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

对于那些通过谷歌到达这里的人，这是我最终在 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/