如何使用Javascript设置dynamically加载的元素的位置

How to set the positions of dynamicaly loaded elements using Javascript?

本文关键字：元素 位置 加载 dynamically 何使用 Javascript 设置      更新时间：2023-09-26

我正在开发一个从服务器上的文件加载到"Apps"中的应用程序。目前，我必须按照特定的顺序加载应用程序，否则它们在位置数组中的位置会错误。

这是帮助解释我的意思的代码。

function getFacebook() {
    var appname = "facebooka1thd";
    $.get("apps/"+appname+"/"+appname+".html", function(data){
        $('.AppList').append(data);
        $.cookie(appname, 1, { expires : 365 });
        checkpositions();
    });
};
function checkpositions() {
    if ($.cookie('PosApps')){
        var Poscookie = $.cookie('PosApps');
        var Pos = JSON.parse(Poscookie);
        $("#User").css({top:Pos[0].top, left:Pos[0].left});
        $("#facebooka1thd").css({top:Pos[1].top, left:Pos[1].left});
        $("#youtubea2thd").css({top:Pos[2].top, left:Pos[2].left});
    };
};
function getAppPositions() {
    var apps = $(".App"),
    positions = [];
    $.each(apps, function (index, app) {
        var positionInfo = $(app).position();
        positions.push(positionInfo);
        console.log(positionInfo);
    });
    var setPositions = JSON.stringify(positions);
    $.cookie("PosApps", setPositions, { expires : 365 });
};

我希望代码能够适应现有应用程序的数量以及添加或删除它们的顺序。

基本上，我不知道如何绕过这一点------我认为我的大部分代码都必须更改才能实现这一点，因为目前位置是按照添加应用程序的顺序保存的，但当用户删除其中一个应用程序时，这并没有帮助，而且位置是相对于添加应用程序顺序设置的。

任何帮助都将是伟大的！

我设法为自己解决了这个问题。。。

function checkpositions() {
    if ($.cookie('PosApps')){
        var Poscookie = $.cookie('PosApps');
        var Pos = JSON.parse(Poscookie);
        for (var i = 0; i < Pos.length; i++) {
            $("#"+Pos[i][0]).css({top:Pos[i][1].top, left:Pos[i][1].left});
        };
    };
};
function getAppPositions() {
    var apps = $(".App"),
    positions = [];
    $.each(apps, function (index, app) {
        var id = $(app).attr('id');
        var positionInfo = [id,$(app).position()];
        positions.push(positionInfo);
        console.log(positionInfo);
    });
    var setPositions = JSON.stringify(positions);
    $.cookie("PosApps", setPositions, { expires : 365 });
};

我所要做的就是在元素的位置之前制作一个二维数组，并使用Pos[i][0]作为id，Posi.top/left作为位置来设置CSS。希望这能帮助任何陷入这种困境的人。此外，如果你确实遇到了问题，我建议你去这个网站。他们的教程真的很好，帮助我解决了这个问题。

相关文章：