Javascript 回收DOM结构而不是重建它

我动态创建div，并希望通过检查div的id以正确的顺序放置新div

创建新数据时，我对数组进行排序并创建一个新的div容器。在第一次构建DOM时，它工作得很好，因为我先创建数据，然后为数组中的每个元素创建div容器

通过单击按钮创建新容器时，数组将被排序，但新的div容器只是附加在其他容器的下面

每个div容器都有一个唯一的id，因此我可以通过检查它们的id来检查placemenet

var myObjs=[]；
功能Obj（编号、名称）{
这个数字=数字；
this.name=名称；
}
$（文档）.ready（函数（）{
push（新的Obj（4，“div#“+4））；//创建测试数据
myObjs.push（新Obj（15，“div#“+15））；
myObjs.push（新Obj（9，“div#“+9））；
myObjs=sortMyList（）；//排序
$（myObjs）.每个（函数（索引，当前）{
buildContainer（当前）；//创建div
});
createNewContainer（12）；//通过单击按钮创建更多测试数据
createNewContainer（3）；//创建测试数据
});
函数buildContainer（currentObj）{//在此处创建DOM元素
变量容器=$（“”）；
container.addClass（“singleContainer”）；
容器属性（“id”，当前对象编号）；
html（currentObj.name）；
$（“#listContainer”）.append（container）；
}
函数createNewContainer（newNumber）{
var newObj=新Obj（newNumber，“div#”+newNumber）；
Myobj.push（newObj）；
myObjs=sortMyList（）；//排序
buildContainer（newObj）；
}
函数sortMyList（）{
返回myObjs.sort（函数（a，b）{
var key=“number”；
var x=一个[键]；
变量y=b[键]；
回报率（（xy）？1:0）；
});
}

.singleContainer{
高度：50px；
背景：红色；
颜色：白色；
边缘顶部：10px；
}

---

考虑到当前div在DOM中已经有序，一个选项是选择所有当前容器并创建一个循环以找到正确的位置

var newId = 10;
var pos = 0;

$('div.singleContainer').each(function() {
    if (newId < $(this).attr('id')) {
        pos = parseInt($(this).attr('id'));
        return false; // We have the position, we don't need to keep looping!
    }
});

if (pos > 0)
    $('div.singleContainer#'+pos).before('<div id="'+newId+'" class="singleContainer">div # '+newId+'</div>');
else
    $('div#listContainer').append('<div id="'+newId+'" class="singleContainer">div # '+newId+'</div>');

var newId=10；
var-pos=0；
$（'div.singleContainer'）。每个（函数（）{
if（newId<$（this.attr（'id'））{
pos=parseInt（$（this.attr（'id'））；
return false；//我们有位置，不需要继续循环！
}
});
如果（位置>0）
$（'div.singleContainer#'+pos.），在（'div#'+newId+''之前；
其他的
$（'div#listContainer'）.append（'div#'+newId+'）；

注意：如果新id等于现有id，则会将新div置于现有div之前

所以，在你的情况下

function buildContainer(currentObj) { // Create a DOM element here

    var pos = 0;

    $('div.singleContainer').each(function() {
        if (currentObj.number < $(this).attr('id')) {
            pos = parseInt($(this).attr('id'));
            return false; // We have the position, we don't need to keep looping!
        }
    });

    if (pos > 0)
        $('div.singleContainer#'+pos).before('<div id="'+currentObj.number+'" class="singleContainer">'+currentObj.name+'</div>');
    else
        $('div#listContainer').append('<div id="'+currentObj.number+'" class="singleContainer">'+currentObj.name+'</div>');
}

functionbuildcontainer（currentObj）{//在这里创建一个DOM元素
var-pos=0；
$（'div.singleContainer'）。每个（函数（）{
if（currentObj.number<$（this.attr（'id'））{
pos=parseInt（$（this.attr（'id'））；
return false；//我们有位置，不需要继续循环！
}
});
如果（位置>0）
$（'div.singleContainer#'+pos.），在（''+currentObj.name+''）之前；
其他的
$（'div#listContainer'）.append（''+currentObj.name+''）；
}

已编辑：

看看马丁朝夫的回答，他有一个很好的观点。考虑到您有一个具有相同顺序和元素的对象数组，可能更好的选择是搜索该数组中的位置，而不是DOM元素中的位置。如果你有很多div，这个选项可能会更快

function buildContainer(currentObj) { // Create a DOM element here

    var pos = 0;

    for (var i=0, l=myObjs.length; i<l; i++) {
        if (currentObj.number < myObjs[i].number) {
            pos = myObjs[i].number;
            break;
        }
    }

    if (pos > 0)
        $('div.singleContainer#'+pos).before('<div id="'+currentObj.number+'" class="singleContainer">'+currentObj.name+'</div>');
    else
        $('div#listContainer').append('<div id="'+currentObj.number+'" class="singleContainer">'+currentObj.name+'</div>');
}

functionbuildcontainer（currentObj）{//在这里创建一个DOM元素
var-pos=0；
对于（变量i=0，l=myObjs.length；i 0）
$（'div.singleContainer#'+pos.），在（''+currentObj.name+''）之前；
其他的
$（'div#listContainer'）.append（''+currentObj.name+''）；
}

---

我希望它有帮助

您应该有一个内存中的结构，它表示您正在使用的DOM，并且只与它交互。例如：

var struct = {};
struct["id" + number] = domRef

然后，当调用build函数时，将引用传递给要放置它的对象，如下所示：

buildContainer(newObj, struct["id" + number]);

您不需要遍历所有内容来查找所需内容，因为您在函数调用时正在传递它