Question

在jQuery的网站上有一个文档说，

$.getJSON( "ajax/test.json", function( data ) {
  var items = [];
  $.each( data, function( key, val ) {
    items.push( "<li id='" + key + "'>" + val + "</li>" );
  });

  $( "<ul/>", {
    "class": "my-new-list",
    html: items.join( "" )
  }).appendTo( "body" );
});

对于那些使用过这种方法的人来说，知道它将所有json属性添加到名为＆＃34; iteams＆＃34;的变量中。然后它转换＆＃34;项目＆＃34;通过将字符串添加到一个名为＆＃34; my-new-list＆＃34;的类的新的无序列表中来转换为html。

现在，如果我不想添加一个名为＆＃34; my-new-list＆＃34;的类的新的无序列表，而是我想将新变量转换为字符串并添加到现有的HTML中元素，用一个名为＆＃34;幕，＆＃34;我该怎么做呢？

这是我的尝试：

var items = [];
var first = '<div class="panel"><div class="panel-gallery"><img src="',
    second = '" Alt=""></div></div>';
$.each( data, function( url ) {
    items.push( first + url + second );
    html: items.join( "" ).appendTo( ".curtain" );
});

显然，这会给我一个错误：

html: items.join( "" ).appendTo( ".curtain" );

Answer 1

它会给你一个错误，因为它不是一个有效的语法，因为你把它放在一个函数中，而不是一个哈希。如果items.join返回html，只需删除＆＃34; html：＆＃34;并这样做：

$(items.join( "" )).appendTo( ".curtain" );

会做到这一点。

Answer 2

以最简单的方式回答您的问题，无法完成。

为什么？

以下是文档：http://www.w3schools.com/jquery/html_html.asp

简而言之，jQuery中的.html（）方法必须有一个＆＃34;选择器。＆＃34;

这意味着，您必须有一个选择器才能将对象转换为。

您有三种方法可以实现目标。

1）如果您不想扩展变量＆＃34; items＆＃34;，您可以简单地从代码中取出它并使用：

$('.yourClass').append(XXX);

看起来你失败了。这是因为将字符串挂载到DOM树的第一个进程的循环javascript引擎，你可以使用load方法，但你可能仍然会失败。所以你必须使用方法2或3。

2）使用＆＃39; .yourClass＆＃39;是空的，然后：

$('.yourClass').html(XXX);

现在这很方便但是，你可能没有空的＆＃39; .yourClass＆＃39;所以...

3）创造一个新课程，让我们称之为“.newClass＆＃39;：

$( "<div/>", {
    "class": "newClass",
    html: items.join( "" )
  }).appendTo( "body" );

现在接受＆＃39; .newClass＆＃39;的所有孩子。并将它们附加到＆＃39; .yourClass＆＃39;：

$(".newClass").children().appendTo(".yourClass");

最后，删除＆＃39; .newClass＆＃39;。

$(".newClass").remove();

难吗？是。那是怎么回事。对不起朋友。

如何将json文件转换为HTML而不先将它们添加到元素中？

2 个答案: