我如何使同一類的子元素只出現一次

Question

我的問題是，我有一個父元素，在這種情況下，由一個類定義的div和沒有ID。

使用菜單，我可以調用一個函數，創建父div的副本，我可以獨立移動。

我將此代碼添加到創建父div的函數。

function makeSmallBlockdiv() { 
    $("#canvas").append('<div class="SmallBlock">SMALL BLOCK 350X300</div>') 
    $(".SmallBlock").draggable({ 
     containment: "#canvas", 
     scroll: false, 
     grid: [10, 10] 
    }, { 
     cursor: "move", 
     cursorAt: { 
      top: 300, 
      left: 175 
     } 
    }) 
    $(".Smallblock").append('<div class="article_title"></div>') 
    $(".Smallblock").append('<div class="article_Image"><img style="width: 100%;" src="<? echo $image ?>"></div>') 
    $(".Smallblock").append('<div class="font14"><? echo substr($article_text, 0, 200) ?></div>') 
}​ 

我知道PHP代碼不起作用，但這不是問題;我用文字和有效的圖像目標替換它沒有任何運氣

問題是，子div傳播給我創建的所有父母。所以，我最終在第二父兩套子節點，並在第三等三套​​子節點....

有什麼辦法保住孩子節點只有一個類定義和讓他們只填充創建它們的父項？

Answer 1

我想你需要的是以下幾點：

var smallBlock = $('<div class="SmallBlock">SMALL BLOCK 350X300</div>').appendTo("#canvas"); 
smallBlock.draggable({ 
     containment: "#canvas", 
     scroll: false, 
     grid: [10, 10] 
    }, { 
     cursor: "move", 
     cursorAt: { 
      top: 300, 
      left: 175 
     } 
    }) 
    smallBlock.append('<div class="article_title"></div>') 
    smallBlock.append('<div class="article_Image"><img style="width: 100%;" src="<? echo $image ?>"></div>') 
    smallBlock.append('<div class="font14"><? echo substr($article_text, 0, 200) ?></div>') 

這孩子只添加到新創建的SmallBlock格。