0

我刚刚开始学习 jQuery，并且已经掌握了一些基本的布局和 UI 插件。但是，我想创建一个自定义小部件，使用如下所示的语法：

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”的 div 中创建一个可拖动对象列表。问题在于，包含列表项的 html/格式需要由小部件生成并动态添加到父容器中，因为它们事先不会存在于 html 中。

我见过的所有 jQuery 教程都在预先存在的 html 上运行，只需重新格式化/移动/设置样式即可。有人对我如何做到这一点有想法吗？

4

1 回答 1

1

我认为您想知道如何在 JavaScript/jQuery 中动态创建新元素（例如 div 或 spans 或表）？如果是这样，有几种方法。

使用文档对象创建它。

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 对象数组并创建每个 div，然后将它们添加到您的父容器中。例子：

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-07T21:23:41.190 回答