jQuery按正確順序插入元素vs detach（）。sort（）？

比方說，我有以下HTML結構：jQuery按正確順序插入元素vs detach（）。sort（）？

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

是否有可能（以及如何）以正確的順序插入一個新的元素<li>3</li>沒有分離的元素和訴諸？原因是，我相信如果你.detach（）和.append（）元素，你會導致頁面重排（如果元素四處移動，我認爲會發生）。但出於某種原因，將它插入正確的位置vs append/detach/sort/append似乎更清晰。

我見過jQuery中的第n個子選擇器，我也正在使用underscore.js框架（它提供了_.sortedIndex，它告訴我元素的正確位置），但我似乎無法形象用正確的方式把它放在那裏。

一些背景：我正在與backbone.js工作，我有一個項目的集合。那麼我假設我需要一個集合的視圖（或集合中的每個項目的視圖？）。當我將一個元素添加到集合中時，我設置了比較器，以便集合正確排序，但頁面上的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/

來源

2011-03-22 dlamotte

你可以使用一個jQuery

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

小提琴頁：http://jsfiddle.net/Hrjks/

更好：

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

搗鼓這個：http://jsfiddle.net/Hrjks/1/

來源

2011-03-22 16:04:14

可能需要一些錯誤檢查索引界限。 – 2011-03-22 16:09:40

最近我有同樣的問題，我固定用下面的函數。

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

它基本上得到的parent所有的孩子，然後做一個filter。如果你只需要比較它的值，你可以簡單地通過避免回調來實現，但在我的情況下，它是需要的，因爲我按照幾個標準進行排序。

如果你想用一個降序排序只需更換append通過prepend，before通過last和first爲last，它應該是工作。

隨意在我的遊樂場玩：http://jsfiddle.net/crodas/FMEkb/5/

來源

2012-08-19 09:31:57 crodas

jQuery按正確順序插入元素vs detach（）。sort（）？

回答

相關問題