Question

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

所有div ID都是唯一且数字的。所有div都可以在存储在数组中的对象中找到。

示例：已创建Div ID：

Div ID按顺序放置： 2

解决方案

查找小于div的{{1}} ID并将其放在
查找超过2的{{1}} ID并将其放在

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

你可以看看这个小提琴，看看我的逻辑在哪里。 http://jsfiddle.net/5egxoy78/1/

Answer 1

如果你知道你知道每个div的ID是唯一的（即你不会尝试插入一个已经存在ID的div），那么你可以遍历你的div并插入新的在第一个div之前，其ID大于您要插入的div 。

否则它几乎是一样的，除了你需要考虑你要插入的div的ID等于你正在迭代的当前div的条件。然后你可以只替换内容。

边缘案例

没有div。如果length == 0，则附加到父级。
没有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 here

根据相关的div

2 个答案: