回收DOM结构而不是重建它

Question

我动态地创建div，并希望通过检查div的ids来按正确的顺序放置新的div。

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

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

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

​

var myObjs = [];

function Obj(number, name) {
    this.number = number;
    this.name = name;
}

$(document).ready(function () {
myObjs.push(new Obj(4, "div # " + 4)); // create test data
myObjs.push(new Obj(15, "div # " + 15));
myObjs.push(new Obj(9, "div # " + 9));

myObjs = sortMyList(); // SORT

$(myObjs).each(function (index, current) {
buildContainer(current); // create the divs
});

createNewContainer(12); // create more test data by button click
createNewContainer(3); // create test data
});

function buildContainer(currentObj){ // Create a DOM element here
    var container = $("<div></div>");
  	container.addClass("singleContainer");
  	container.attr("id", currentObj.number);
    container.html(currentObj.name);
  	$("#listContainer").append(container);
}

function createNewContainer(newNumber){
	var newObj = new Obj(newNumber, "div # " + newNumber); 
  myObjs.push(newObj);
  
  myObjs = sortMyList(); // SORT
  
  buildContainer(newObj);
}

function sortMyList() {
    return myObjs.sort(function (a, b) {
        var key = "number";
        var x = a[key];
        var y = b[key];
        return ((x < y) ? -1 : ((x > y) ? 1 : 0));
    });
}

.singleContainer{
  height: 50px;
  background: red;
  color: white;
  margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="listContainer">

</div>

​

因此，正如您所看到的，我需要修复buildContainer()函数来实现这一点。新创建的容器只需要知道在其他现有容器之间放置自己的位置。

，我唯一的想法就是销毁所有的容器，然后再重建它们。但因为表现，我不想这样，对吧？

因此，我可以使用这段代码，在对数组进行排序之后，我必须将它放在我的createNewContainer()函数中。

  $("#listContainer").empty(); // Remove all children / div containers
  $(myObjs).each(function (index, current) {
    buildContainer(current); // build them all again
  });

帮个忙就太棒了！

Answer 1

考虑到当前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>');

注意:如果新id等于现有id，这将在现有id之前定位新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>');
}

编辑的

看看马丁·查夫的回答，他有一个很好的观点。考虑到您有一个具有相同顺序和元素的对象数组，可能更好的选择是搜索该数组中的位置，而不是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>');
}

我希望它能帮上忙

Answer 2

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

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

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

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

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