Question

我可以加载像这样的HTML

 $('#grid').empty();
  for (i in main_images) {
 $('#grid').append($('<li gallery="'+i+'"><div class="title">'+(titles[i] )+'</div><a href="#" class="zoom"><img src= '+main_images[i]+'/><span></span></a></li>'));
}

但我似乎无法为此做到这一点。

 <div id="container" boarder ="0">
<ul><li><img src="'+img+'"/></li></ul>
  <span class="button prevButton "></span>
  <span class="button nextButton"></span>
  <span> <a href="#" class="zoom_back"></a></span>
  <span> <a href="#" class="zoom_big"></a></span>
  <span> <a href="#" class="info"></a></span>
  <span> <a href="#" class="info_on"></a></span>
  <span> <a href="#" class="info_box"></a></span>
  <span> <a class="info_box_title">title</a></span>
  <span> <a class="info_box_status">status</a></span>
  <span> <a class="info_box_about"> about about </a></span>
  <span> <a href="#" class="box_counter" ></a></span>
     </div>

我尝试了这个，但它会抛出错误

$('#container').empty();
$('#container').append($('<ul><li><img src="'+img+'"/></li></ul>
<span class="button prevButton "></span>
<span class="button nextButton"></span>
<span> <a href="#" class="zoom_back"></a></span>
<span> <a href="#" class="zoom_big"></a></span>
<span> <a href="#" class="info"></a></span>
<span> <a href="#" class="info_on"></a></span>
<span> <a class="info_box"></a></span>
<span> <a class="info_box_title">title</a></span>
<span> <a class="info_box_status">status</a></span>
<span> <a class="info_box_about"> about</a></span>
<span> <a href="#" class="box_counter" ></a></span>
 '));

Answer 1

您不能在JS字符串中包含换行符。除非你用\来逃避它们（在这种情况下，它们会被忽略，就好像你的字符串中没有换行符。如果你的字符串中确实需要换行符，你可以使用\n而不是文字换行符）：

$('#container').append('<ul><li><img src="'+img+'"/></li></ul>\
<span class="button prevButton "></span>\
<span class="button nextButton"></span>\
<span> <a href="#" class="zoom_back"></a></span>\
<span> <a href="#" class="zoom_big"></a></span>\
<span> <a href="#" class="info"></a></span>\
<span> <a href="#" class="info_on"></a></span>\
<span> <a class="info_box"></a></span>\
<span> <a class="info_box_title">title</a></span>\
<span> <a class="info_box_status">status</a></span>\
<span> <a class="info_box_about"> about</a></span>\
<span> <a href="#" class="box_counter" ></a></span>\
');

Answer 2

使用以下代码代替您的代码。

 $('#grid').append('<li gallery="'+i+'"><div class="title">'+(titles[i] )+'</div><a href="#" class="zoom"><img src= '+main_images[i]+'/><span></span></a></li>');

你想把jQuery选中的对象追加到网格中。

Answer 3

您不需要在$（）中包装HTML，因为它用于选择元素。您已选择容器ID以将HTML附加到。

此外，要添加新行以更好地组织代码，但不一定在html中添加新行，请使用＆＃34; \＆＃34;。

$('#container').empty();
$('#container').append('<ul><li><img src="'+img+'"/></li></ul> \
<span class="button prevButton "></span> \
<span class="button nextButton"></span><span> \
<a href="#" class="zoom_back"></a></span> \
<span> <a href="#" class="zoom_big"></a></span> \
<span> <a href="#" class="info"></a></span> \
<span><a href="#" class="info_on"></a></span> \
<span> <a class="info_box"></a></span> \
<span> <a class="info_box_title">title</a></span> \
<span> <a class="info_box_status">status</a></span> \
<span> <a class="info_box_about"> about</a></span> \
<span> <a href="#" class="box_counter" ></a></span>');

http://jsfiddle.net/dF7Wf/1/

试图让jquery加载html

3 个答案: