javascript - 回收 DOM 结构而不是重建它

Question

我动态创建 div，并希望通过检查 div 的 ID 以正确的顺序放置新的 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，这会将新的 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>');
}

已编辑:

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

希望对你有帮助