Question

我循环遍历XML文件中的每个相关标记并执行此代码。

$('<div class="product_image"></div>').html('<a href="'+url+'"><img src='+urlZoomImage+' /></a>').appendTo('#content');
$('<div class="product_title"></div>').html('<a href="'+url+'">'+title+'</a>').appendTo('#content');

我想用一个名为product_box的div来包围product_image和product_title，如下所示：

<div id="content">
  <div class="product_box">
    <div class="product_image">My image code</div>
    <div class="product_title">My title code</div>
  </div>
</div>

只有内容div写在HTML中，它必须保持这样（我不能在那里编写product_box代码，因为它将在每个成功的查找中生成）。我该怎么做呢？

提前致谢。

Answer 1

当您使用jQuery创建HTML元素时，您很容易迷失在代码中。尝试将单独的元素保存在变量中，并在初始化后进行排列。像这样：

var div_box = $('<div></div>').addClass('product_box');
var div_image = $('<div></div>').addClass('product_image').html('<a href="'+url+'"><img src='+urlZoomImage+' /></a>');
var div_title = $('<div></div>').addClass('product_title').html('<a href="'+url+'">'+title+'</a>');
$('#content').append(div_box.append(div_image).append(div_title));

Answer 2

只需使用相同的语法创建.product_box:元素，然后将其他内容附加到那个元素，而不是#content元素。

var product_box = $('<div />', {'class' : 'product_box'}).appendTo('#content');
$('<div class="product_image"></div>').html('<a href="'+url+'"><img src='+urlZoomImage+' /></a>').appendTo(product_box);
$('<div class="product_title"></div>').html('<a href="'+url+'">'+title+'</a>').appendTo(product_box);

Answer 3

var box = $('<div class="product_box"></div>');
var product_image = $('<div class="product_image"></div>').html('<a href="'+url+'"><img src='+urlZoomImage+' /></a>');
var produc_title = $('<div class="product_title"></div>').html('<a href="'+url+'">'+title+'</a>');

box.append(product_image,product_title).appendTo('.content');

Reference

用jQuery添加另一个div

3 个答案: