javascript - 获取所有页面 ID 并一次循环一个来更改 CSS？

Question

我正在使用 localStorage在某些 <div> 上保存 CSS 信息的。当用户修改其中一个时 <div>的，它设置了一个 localStorage具有以下语法的项目:

ID OF ELEMENT + "-" + x,y, or z (for the different CSS attributes)

因此，div 的 x 坐标的项目示例 #two会是:

two-x

这些设置工作正常，我可以通过在页面加载时执行以下操作来反射(reflect)这一点:

$(".drag").css({
"left" : localStorage.getItem("two-x"), 
"top" : localStorage.getItem("two-y"),
"z-index" : localStorage.getItem("two-z"),
});

该页面上将有许多 div，我不能对它们中的每一个进行硬编码。那么，这让我想到了我的问题……我怎样才能获得页面上的所有 ID，将它们分配给一个变量，然后更改每个 ID 的 CSS，直到它们都被考虑在内？

我的尝试:

var idtwo = [];
$("body").find("div").each(function(){ idtwo.push(this.id); });
$(".drag").css({
            "left" : localStorage.getItem(idtwo + "-x"), 
            "top" : localStorage.getItem(idtwo + "-y"),
            "z-index" : localStorage.getItem(idtwo + "-z"),
});

唯一的问题是 idtwo 的输出是one,two (当页面上有两个 ID 为 1 和 2 的 div 时)，它只需要 one , 运行 CSS 更改，然后 two ，并运行 CSS 更改。

Answer 1

希望这对您有所帮助。

$('div[id]').each(function() {
    var id = $(this).attr('id');
    $(this).css({
        'left': localStorage.getItem(id + '-x'), 
        'top': localStorage.getItem(id + '-y'),
        'z-index': localStorage.getItem(id + '-z')
    });
});