動態創建HTML元素

Question

我正在嘗試使用該插件創建一個Coverflow，位於此處： http ://vanderlee.github.io/coverflow/

我要做的就是：

<div class="coverflow">
    <div class="cover">A</div>
    <div class="cover">B</div>
    ...
    <div class="cover">Y</div>
    <div class="cover">Z</div>
</div>

<script>
    $(function() {
        $('.coverflow').coverflow();
    });
</script>

對於手動創建的元素，這很有效，但是在執行以下操作時：

var el = {
    newDiv: $("<div>", { class: "cover newDiv"}),
    newElt: $("<div>", { class: "cover newDiv"})
}

$("#preview-coverflow").append(el.newDiv);
$("#preview-coverflow").append(el.newElt);

我的div以垂直方式而不是水平方式顯示。 我的問題是兩種元素創建形式之間是否有區別？ 在這兩種情況下，我都在（嘗試）創建空的div並追加到父對象。 我做錯什么了嗎？

在我的樣式表中，僅查看我的空div：

.newDiv { 
    background-color:red
}

Answer 1

似乎在添加元素之后需要運行.coverflow（）。

在控制台中，動態添加html后，只需嘗試運行

$('.coverflow').coverflow('refresh');

如果這似乎可以解決問題，請在添加新元素后考慮實施。

---

沒有注意到插件具有刷新功能，使用刷新應該可以解決它。

Answer 2

添加新元素后嘗試使用refresh方法

$('.coverflow').coverflow('refresh');

從文檔中：

刷新

 Redraw the covers. You shouldn't ever need to do this unless you are adding or removing covers or changing the covers yourself. 

Answer 3

干得好：

<style>
    .newDiv {
        background: gold;
        position: absolute;
        width: 320px;
        height: 320px;
        overflow:hidden;
    }
</style>
<script>
    $(function() {
        $('.coverflow').coverflow();
        addNewTest();// test call here
    });

function addNewTest(){
    var el = {
        newDiv: $("<div>", { class: "cover newDiv"}),
        newElt: $("<div>", { class: "cover newDiv"})
    }

    $("#preview-coverflow").append(el.newDiv, el.newElt).coverflow('refresh');
}
</script>

Answer 4

嘗試使用此插件，無需任何插件即可動態創建元素。 其純JavaScript和JQuery：

<script>

    var myDivs = ""; 

    for(var i=0; i <10; i++)
    {
        myDivs+= "<div class='cover'></div>";
    }

    $(".coverflow").html(myDivs);

<script>

我認為這很清楚您的概念。 希望這行得通。