根據相關div按順序添加div

Question

我有一個復雜的情況，我需要根據相關的div在正確的位置放置一個帶有數字ID的div。 我已經能夠匹配某個標准列表，但我錯過了最復雜的情​​況 - 其中div的ID不比任何其他div小1或1。

所有div ID都是唯一且數字的。 所有div都在存儲在數組中的對象中找到。

示例：已創建的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之前插入新的div。其ID大於您要插入的div的ID 。

否則它幾乎是一樣的，除了你需要考慮你插入的div的ID等於你正在迭代的當前div的條件。 然后你可以只替換內容。

邊緣案例

1. 沒有div。 如果length == 0 ，則追加到父級。

2. 沒有div的id大於或等於您要插入的id，然后追加到父級。

Answer 2

這個解決方案或多或少與JOCO611建議做同樣的事情。 這是循環遍歷所有div並根據遍歷的ID添加新的div ...

當然，如果你有成千上萬的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