Question

我正在尝试动态创建无序列表，然后将其转换为jQuery UI标签...

我认为我在这里遇到语法问题，我设法创建列表并将其转换为窗口小部件，但这些选项卡看起来不正确，它们具有窗口小部件的轮廓但内容没有实际的标签，所以我的猜测只是'有点工作'

$("#doc3").append("<ul>");

$("#doc3").append("<li><a href='#thisGame'>asass<a></li>");
$("#doc3").append("<li><a href='#thisGame2'>asass<a></li>");

$("#doc3").append("</ul>");

$("#doc3").append("<div id='thisGame'>sajaskj askj asjkasjk </div>");
$("#doc3").append("<div id='thisGame2'>sajaskj askj asjkasjk </div>");

$('#doc3').tabs();

是这样做的吗？（现在它只是测试，最终我想使用for循环来创建列表并从数组中提取数据）

Answer 1

首先，我们需要关闭这些锚点（</a>）。问题是你添加了HTML并且浏览器会查看它并认为“嘿，他没有关闭标签......让我们这样做”。因此，当您添加第一个UL（$("#doc3").append("<ul>");）时，它实际上添加了<ul></ul>。为避免这种情况，只需附加自包含的块。 E.g。

$("#doc3").append("<ul><li><a href='#thisGame'>asass</a></li><li><a href='#thisGame2'>asass</a></li></ul>");

这样，所有打开的标签都有相应的结束标签，标签就会出现。

编辑：基于Kumu评论的替代版本。

$("#doc3").append("<ul></ul>");

var ULElement=$("#doc3 ul")

ULElement.append("<li><a href='#thisGame'>asass</a></li>");
ULElement.append("<li><a href='#thisGame2'>asass</a></li>");

$("#doc3").append("<div id='thisGame'>sajaskj askj asjkasjk </div>");
$("#doc3").append("<div id='thisGame2'>sajaskj askj asjkasjk </div>");

$('#doc3').tabs();

Answer 2

Gerts解决方案可以正常工作，但是将它全部放在一个长字符串中将成为维护噩梦

出于性能原因，最好在字符串/数组中构建标记，然后将其附加到dom一次，而不是创建多个jquery对象并调用多个dom附加。

您可以执行以下操作：

var builder = "<ul>";

for ( var i = 0; i < 5; i++ ){

    builder += "<li><a href='#thisGame"
    builder += i;
    builder += "'>asass<a></li>");

}

//build divs
builder += "<div />";

//close ul
builder += "</ul>";

//set markup of container
$("#doc3").html(builder);

//initialize tabs
$('#doc3').tabs();

动态创建无序列表并将其转换为选项卡

2 个答案: