按相关div顺序追加div

Question

我有一个复杂的情况，我需要根据相关div在正确的位置放置一个带有数字ID的div。我已经能够匹配一定的标准列表，但我错过了最复杂的情况-其中div的ID不小于1或大于1任何其他div。

所有div id都是唯一的数字。所有div都可以在存储在数组中的object中找到。

示例:已经创建的Div id:

0
1
3
4
8

Div ID排序:2

解决方案

1. 找到比2小一个的div Id并将其放在
后面
2. 找到比2多一个的div Id并将其放在
之前

在这种情况下，我们成功了。我们将看到1是1小于2，并将其放在1之后。或者如果1不存在，我们可以把它放在3之前。但是在我们的新div ID是6的情况下，我们没有逻辑放置它。

你可以看看这个小提琴，看看我的逻辑出了什么问题。http://jsfiddle.net/5egxoy78/1/

Answer 1

如果你知道你知道每个div的ID是唯一的(即你不会试图插入一个已经存在的ID的div)，那么你可以循环通过你的div和插入新的之前的第一个div的ID大于你正在插入的div 。

其他都差不多，除了你需要考虑你插入的div的ID等于你正在迭代的当前div的条件。然后你就可以把内容替换掉。

边界情况

1. 没有div。如果是length == 0，则追加到父级

2. 没有div的id大于或等于您试图插入的id，然后附加到父级

Answer 2

这个解决方案或多或少做了与JOCO611建议的相同的事情。这就是遍历所有div并根据遍历的id添加新的div…

当然，如果你要有成千上万的潜水-那么我不认为这是一个很好的解决方案!

var container = $('.container');
function Foo(id) {
    this.wrapper = $('<div id = "' + id + '" class = "wrapper">I am Foo # ' + id + '</div>');
    this.id = id;
    return this;
}
var foos = [];
foos[1] = new Foo(1);
container.append(foos[1].wrapper);
foos[2] = new Foo(2);
container.append(foos[2].wrapper);
foos[6] = new Foo(6);
container.append(foos[6].wrapper);

// Properly place foo with id of x 
var newFooId = 4;
foos[newFooId] = new Foo(newFooId);
var bFound = false;
var currFoo = null;
var f = $('div.container div.wrapper');
for (var i = 0; i < $('div.container div.wrapper').length; i++) {
    if ($(f[i]).prop('id') < newFooId) {
        currFoo = f[i];
    } else {
        if (currFoo === null) {
            container.prepend(foos[newFooId].wrapper);
        } else {
            $(foos[newFooId].wrapper).insertAfter($(currFoo));
        }
        bFound = true;
        return false; //break;
    }
}
if (!bFound) {
    container.append(foos[newFooId].wrapper);
}

查看此处的JsFiddle