Question

我的玉！ https://lh4.googleusercontent.com/-hzRqciA1Tjs/UGmc39ijHuI/AAAAAAAAAFk/0XJzY0ZqU70/s720/App.jpg

div(data-role='content')
   div(class='content-primary')
      ul(data-role="listview", data-split-theme='a',data-split-icon='gear')
         li(data-theme='a')
          a(href="")
            div(id='addClientDivId')
          a(href='#', data-icon='delete', title=' Delete ')

我想用jquery动态生成上面的jade内容。任何人都可以帮助我.. ???

由于我没有声誉，我已将图片截图上传到picasa。请点击截图。我已经尝试了下面给出的所有可能性，但无法获得截图中的效果。

答案：

我找到了查询的解决方案。

var newContent = '<div data-role="content" data-theme="a" class="content-primary">';
        newContent += '<ul data-role="listview" data-split-theme="a" data-inset="true" id="ulId">';
        newContent += '<li>';
        newContent += '<a href="">';
        newContent += '<h4></h4>';
        newContent += '<h5></h5>';
        newContent += '<a href="" , data-icon="delete">';
        newContent += '</a>';
        newContent += '</a>';
        newContent += '</li>';
        newContent += '</ul>';
        newContent += '</div>';
        $("#addClientDivId").append(newContent).trigger('create');

Answer 1

您可以将每个标记构建为单独的jQuery对象：

var contentDiv = $('<div></div>').attr('data-role','content');
var contentPrimary = $('<div></div>').attr('class', 'content-primary');
var ul = $('<ul></ul>');
$(ul).attr('data-role', 'listview').attr('data-split-theme', 'a').attr('data-split-icon','gear');

然后将您的李添加到您的ul ..

for(..) {
   var li = $('<li></li>');
   var liContent = $('<a></a>').attr('href', 'a');
   // You can build the rest of your li content here.

   // Append the li content to the li
   $(li).append(liContent);

   // And then append the li to the ul
   $(ul).append(li);
}

完成ul后，您可以完成剩下的工作。

$(contentPrimary).append(ul);
$(contentDiv).append(contentPrimary);

然后将所有内容添加到DOM中，让我们说在正文中

$('body').append(contentDiv);

为了使性能更高效，可以将整个结构构建为字符串（使用“+”连接），然后将其添加到DOM中。

var contentDivAsString = '<div data-role="content">....</div>';
$('body').append($(contentDivAsString));

任何一种方法都可行，只有第二种方法更有效，你可以用更少的物体来完成它。

Answer 2

只需将html保存在类似这样的字符串中：content = "<div data-role='content'">[...]</div>如果您想将其添加到正文$("body").append(content)

否则，请查看有关选择器的文档：http://api.jquery.com/category/selectors/

Answer 3

你可以试试这个

var aMain=$('<a/>', {
    'text':'Delete',
    'href':'',
    'data-icon':'delete',
    'title':' Delete '
});
var acDivid=$('<div id="addClientDivId"></div>');
var a=$('<a href=""></a>');
var li=$('<li data-theme="a"></li>');
var ul=$('<ul />', {
   'data-role':'listview',
   'data-split-theme':'a',
   'data-split-icon':'gear'
});
var cP=$('<div class="content-primary"></div>');
var content=$('<div data-role="content"></div>');
$('body').append(content.append(cP.append(ul.append(li.append(a.append(acDivid.append(aMain)))))));

DEMO

使用jquery动态生成div，ul，li，标记组合

3 个答案: