【发布时间】：2010-06-16 15:21:08
【问题描述】：
我有这样的事情：
function cat_filter() {
$.ajax({
type: "POST",
url: 'json/cat_filter.aspx',
data: "catId=" + "&styleId=" + "&colourId=" + "&sizeId=" + "&minPrice=" + "&maxPrice=",
dataType: "json",
beforeSend: function () {
//load loading cursor
}, success: function (data) {
var CatItems = "";
for (var x = 0; x < data.PRODUCTS.length; x++) {
CatItems += '<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-' + [x] + ' jcarousel-item-' + [x] + '-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal"><a class="large_image" href="#"><img src="' + data.PRODUCTS[x].product_img + '" alt="' + data.PRODUCTS[x].product_name + '"></a><h3 class="geo_17_darkbrown">' + data.PRODUCTS[x].product_name + '</h3>';
if (data.PRODUCTS[x].product_onsale == 1) {
CatItems += '<img alt="sale" src="assets/images/sale.gif" class="sale"><span class="geo_17_red_linethr">£' + data.PRODUCTS[x].product_retailprice + '</span> <span class="price geo_17_darkbrown">£' + data.PRODUCTS[x].product_webprice + '</span>';
} else {
CatItems += '<span class="price geo_17_darkbrown">£' + data.PRODUCTS[x].product_webprice + '</span>';
}
if (data.PRODUCTS[x].product_COLOURS) {
CatItems += '<span class="colour">';
for (var y = 0; y < data.PRODUCTS[x].product_COLOURS.length; y++) {
CatItems += '<span><a href="' + data.PRODUCTS[x].product_COLOURS[y].colours_large + '"><img src="' + data.PRODUCTS[x].product_COLOURS[y].colours_thumb + '" alt="' + data.PRODUCTS[x].product_COLOURS[y].colour_name + '" /></a></span>';
}
CatItems += '</span>';
}
CatItems += '</li>';
}
$('.carousel_00 ul').html(CatItems);
}, complete: function () {
//remove loading cursor
}
});
}
此代码生成此 html：
<div class="carousel_00">
<ul>
<li><a href="#" class="large_image"><img src="assets/images/dress1.gif" alt="image"></a>
<h3 class="geo_17_darkbrown">Rachel Dress</h3>
<span class="price geo_17_darkbrown">£89.99</span>
<span class="colour">
<span><a href="assets/images/big_image_1.gif"><img src="assets/images/black.gif" alt="balck"></a></span>
<span><img src="assets/images/brown.gif" alt="brown"></span>
<span><img src="assets/images/purple.gif" alt="purple"></span>
</span>
</li>
<li><a href="#"><img src="assets/images/dress2.gif" alt="image"></a>
<h3 class="geo_17_darkbrown">Rachel Dress</h3>
<span class="price geo_17_darkbrown">£89.99</span>
</li>
<li><img class="sale" src="assets/images/sale.gif" alt="sale" /><a href="#"><img src="assets/images/dress3.gif" alt="image"></a>
<h3 class="geo_17_darkbrown">Rachel Dress</h3>
<span class="geo_17_red_linethr">£99.99</span> <span class="price geo_17_darkbrown">£89.99</span>
</li>
<li><a href="#"><img src="assets/images/dress1.gif" alt="image"></a>
<h3 class="geo_17_darkbrown">Rachel Dress</h3>
<span class="price geo_17_darkbrown">£59.99</span>
</li>
<li><a href="#"><img src="assets/images/dress2.gif" alt="image"></a>
<h3 class="geo_17_darkbrown">Rachel Dress</h3>
<span class="price geo_17_darkbrown">£89.99</span>
</li>
<li><a href="#"><img src="assets/images/dress3.gif" alt="image"></a>
<h3 class="geo_17_darkbrown">Rachel Dress</h3>
<span class="price geo_17_darkbrown">£89.99</span>
</li>
<li><a href="#"><img src="assets/images/dress1.gif" alt="image"></a>
<h3 class="geo_17_darkbrown">Rachel Dress</h3>
<span class="price geo_17_darkbrown">£89.99</span>
</li>
<li><a href="#"><img src="assets/images/dress2.gif" alt="image"></a>
<h3 class="geo_17_darkbrown">Rachel Dress</h3>
<span class="price geo_17_darkbrown">£89.99</span>
</li>
<li><a href="#"><img src="assets/images/dress3.gif" alt="image"></a>
<h3 class="geo_17_darkbrown">Rachel Dress</h3>
<span class="price geo_17_darkbrown">£89.99</span>
</li>
</ul></div>
我需要的是每 3 li 将在 div /div 中。 我知道这不符合语义，也不正确，但这只是举例。 （基本上，如果我想知道如何做到这一点，我将替换 li 在 spans 上，而我需要在 li 之外的 div 在 li 上）。
如果有人能帮助我，我会很高兴。因为我拥有的代码对我来说已经太多了。
【问题讨论】：
-
你不能将 li 作为 div 的子元素，如果你告诉浏览器做一些不可能的事情，那么有些人会去做，有些人会试图弄清楚你的真正意思。然后，弄清楚发生了什么就变成了一场噩梦。 不要尝试这个。直接生成有效文件。
-
如果你没有读到我的帖子，我将在这里重复最后一部分。我知道这不是语义的，也不正确，但这只是举例。 （基本上，如果我想知道如何做到这一点，我将替换 li's on spans 和我在 li's on li 之外需要的那个 div）。这不是生产代码，如果我找到解决方案，我会重写它。
-
这不是“只是”语义——插入一个空的 li，在其上附加一个 ul，然后将前 3 个 lis 附加到新的 ul。重复，直到你离开 lis。否则浏览器将重写代码以将 lis 保留在 uls 中。
标签： javascript jquery json