從JSON對象生成自己的自定義jQuery小部件

我剛開始學習jQuery，並獲得了一些基本佈局和UI插件的工作。不過，我想創建，使用語法看起來像這樣一個自定義部件：從JSON對象生成自己的自定義jQuery小部件

var objs = [ 
      {name: 'obj1', prop1: 'val1', prop2: 'val2'}, 
      {name: 'obj2', prop1: 'val3', prop2: 'val4'}, 
      {name: 'obj3', prop1: 'val5', prop2: 'val6'}, 
      ]; 

$(document).ready(function(){ 
    myList = $('#divlist').mywidget(objs); 
});

如果這段代碼創建了一個名爲「divlist」的專區內拖動對象的列表。問題在於，包含列表項的html /格式化需要由小部件生成並動態添加到父容器，因爲它們不會事先存在於html中。

我見過的所有jQuery教程都對已存在的html進行了操作，只是重新格式化/移動/設置它。任何人都有關於如何做到這一點的想法？

來源

2012-05-07 jpreed00

我認爲你想知道如何在JavaScript/jQuery中快速創建新元素（如div或跨度或表格）？如果是這樣，有幾種方法。

使用文檔對象創建它。

var my_new_element = document.createElement("div"); 
// Then feed it to jQuery so you can work with it. 
$(my_new_element);

或者用jQuery創建它。

var my_new_element = $('<div>');

您的解決方案，你需要循環JSON對象數組過去，創建每個格，將它們添加到您的父容器，當您去。例如：

var parent_div = '#divlist'; 
for (var i = 0; i < objs.length; i++) { 
    // Feed it straight to jQuery so it's easier to work with. 
    var widget_member = $(document.createElement('div')); 

    // Make it draggable. 
    widget_member.draggable(); 

    // Append to the parent div. 
    $(parent_div).append(widget_member); 
}

來源

2012-05-07 21:23:41 kevin628

是的，我已經創建了動態html元素使用JavaScript之前，感謝jQuery版本。在將它們附加到父級div之前，我會使用jQuery將「可拖動」添加到這些對象中的每個對象嗎？如果是這樣，因爲他們沒有名字，我會如何參考他們？ – jpreed00

@ jpreed00你應該可以。 – kevin628

我在你回答之後立即編輯了我的評論。我將如何引用動態元素來添加可拖動屬性，因爲它們沒有名稱？ – jpreed00

從JSON對象生成自己的自定義jQuery小部件

回答

相關問題