Question

到目前为止，已经在网站上以及互联网上搜索和搜索过任何运气。

我通过JQuery通过从原始html源克隆它们来生成一组动态生成的div。虽然我能够设置和播放来自原始div的可能属性，但克隆的那些根本没有响应（既不属于height和width属性），尽管我可以选择它们而不会出现问题

以下是原始HTML：

<div style="width: 504px; height: 252px; left: 333px; top: 135px;" id="mainHolder">
    <div style="width: 504px; height: 252px;" id="holder">
        <div style="width: 126px; height: 63px;" id="idTile_5369" class="tile"></div>
        <div style="width: 126px; height: 63px;" id="idTile_5373" class="tile"></div>
        <div style="width: 126px; height: 63px;" id="idTile_5377" class="tile"></div>
        <div style="width: 126px; height: 63px;" id="idTile_5381" class="tile"></div>                   
    </div>
    <div id="holderHandler"></div>
</div>

以下是要应用的CSS规则：

#mainHolder{
    position: relative;
}
#holder, #holderHandler, .tile, .tileHandler{
    position: absolute;
}

此处为JS代码：

getDataJsonServer('tiles.php', (function(data){ //getDataJsonServer --> custom function to obtain json data from the server through the JQuery getJson method
    var mainHolder=$('#mainHolder');
    var tilesHandler=$('#holder .tile', this.mainHolder).clone();
    tilesHandler.addClass('tileHandler');
    tilesHandler.removeClass('tile');
    tilesHandler.attr('id', function(i, idTileHandler){ return 'idTileHandler_'+extractId(idTileHandler); }); //extractId -->  custom function that extracts the id
    $('#holderHandler', this.mainHolder).append(tilesHandler);

    for(var tile in data){
        $('#idTile_'+data[tile].idTile, this.mainHolder).css({left: data[tile].position.left, top: data[tile].position.top});
        $('#idTileHandler_'+data[tile].idTile, this.mainHolder).css({left: data[tile].positionHandler.left, top: data[tile].positionHandler.top});
    }
}

最后，此处Json数据由tiles.php召回：

"data": [{
    "idTile": 5369,
    "position": {
        "left": -62,
        "top": 0
    },
    "positionHandler": {
        "left": -62,
        "top": 0
    }
},
"idTile": 5373,
    "position": {
        "left": -62,
        "top": 0
    },
    "positionHandler": {
        "left": -62,
        "top": 0
    }
},
"idTile": 5377,
    "position": {
        "left": -62,
        "top": 0
    },
    "positionHandler": {
        "left": -62,
        "top": 0
    }
},
"idTile": 5381,
    "position": {
        "left": -62,
        "top": 0
    },
    "positionHandler": {
        "left": -62,
        "top": 0
    }
}]

虽然for/in循环中的最后一行工作正常，但另一行根本没有设置left和top属性，而不会抛出任何错误消息。

为什么会发生这种情况？是因为我怀疑第二组div是否会产生动态？我该如何解决？

修改

添加了由tiles.php
在this.tilesHandler区块（勘误表）中this.mainHolder更改了for/in。

Answer 1

注意不确定id'd元素的clone是否在上面的部分中有所改变，但是看起来可能已被更改，因此不是 2 在id之后，.clone()在文档中具有相同的值？

另外，不确定定义data的位置？ tile元素是DOM style属性吗？

请说明data和tile变量是什么。感谢

也许第一次尝试引用css属性？

尝试

for(var tile in data){
        $('#idTile_'+data[tile].idTile, this.tilesHandler).css({"left": data[tile].position.left, "top": data[tile].position.top});
        $('#idTileHandler_'+data[tile].idTile, this.tilesHandler).css({"left": data[tile].positionHandler.left, "top": data[tile].positionHandler.top});
    }

Answer 2

最后，这是extractId()功能的一个问题，尽管我在发布之前已经过测试和重新测试。

该函数正在返回字符串的数字id部分，但它前面是一个下划线字符。所以，最后，我得到了带有双下划线的id的克隆div。

很抱歉给您带来不便，感谢您的努力。

无法通过jquery在动态生成的div上设置top / left属性

2 个答案: