Question

我刚开始学习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);
});

此代码在div中创建一个名为“divlist”的可拖动对象列表。问题在于，包含列表项的html /格式需要由窗口小部件生成并动态添加到父容器，因为它们不会事先存在于html中。

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

Answer 1

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

使用文档对象创建它。

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);
}

自定义jQuery小部件，它从JSON对象生成自己

1 个答案: