Javascript 插入<;部门>;每三天外出一次<;李>;
我有这样的想法:Javascript 插入<;部门>;每三天外出一次<;李>;,javascript,jquery,json,Javascript,Jquery,Json,我有这样的想法: function cat_filter() { $.ajax({ type: "POST", url: 'json/cat_filter.aspx', data: "catId=" + "&styleId=" + "&colourId=" + "&sizeId=" + "&minPrice=" + "&maxPrice=", dataType: "json",
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
}
});
}
success: function(data) {
var CatItems = "";
for(var x=0; x < data.PRODUCTS.length; x++) {
if(x%3==0)
CatItems += "<div>";
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>';
if(x%3==0)
CatItems += "</div>";
}
$('.carousel_00 ul').html(CatItems);
},
功能cat_过滤器(){
$.ajax({
类型:“POST”,
url:'json/cat_filter.aspx',
数据:“catId=“+”&styleId=“+”&COLORIID=“+”&sizeId=“+”&minPrice=“+”&maxPrice=“”,
数据类型:“json”,
beforeSend:函数(){
//加载光标
},成功:函数(数据){
var CatItems=“”;
对于(var x=0;x'+数据。产品[x]。产品名称+';
if(data.PRODUCTS[x].product_onsale==1){
CatItems+='£;'+data.PRODUCTS[x]。product_retailprice+'£;'+data.PRODUCTS[x]。product_webprice+'';
}否则{
CatItems+='£;'+data.PRODUCTS[x].product_webprice+'';
}
if(data.PRODUCTS[x].产品颜色){
CatItems+='';
对于(var y=0;y';
}
$('.carousel_00 ul').html(CatItems);
},完成:函数(){
//删除加载光标
}
});
}
此代码生成以下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>
-
蕾切尔礼服
&磅;89.99
-
蕾切尔礼服
&磅;89.99
-
蕾切尔礼服
&磅;99.99英镑;89.99
-
蕾切尔礼服
&磅;59.99
-
蕾切尔礼服
&磅;89.99
-
蕾切尔礼服
&磅;89.99
-
蕾切尔礼服
&磅;89.99
-
蕾切尔礼服
&磅;89.99
-
蕾切尔礼服
&磅;89.99
我需要的是,每3个li将在div/div中。我知道这不是语义上的,也不正确,但这只是一个例子。(基本上,如果我能弄清楚如何做到这一点,我将替换li的on spans和li的on li之外需要的div)。
如果有人能帮助我,我将非常高兴。因为我拥有的代码已经太多了。我将使用dom函数(document.createElement和element.appendChild),而不是使用字符串。但如果我坚持你的方法,情况会是这样的:
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
}
});
}
success: function(data) {
var CatItems = "";
for(var x=0; x < data.PRODUCTS.length; x++) {
if(x%3==0)
CatItems += "<div>";
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>';
if(x%3==0)
CatItems += "</div>";
}
$('.carousel_00 ul').html(CatItems);
},
成功:函数(数据){
var CatItems=“”;
对于(var x=0;x'+数据。产品[x]。产品名称+';
if(data.PRODUCTS[x].product_onsale==1){
CatItems+='£;'+data.PRODUCTS[x]。product_retailprice+'£;'+data.PRODUCTS[x]。product_webprice+'';
}否则{
CatItems+='£;'+data.PRODUCTS[x].product_webprice+'';
}
if(data.PRODUCTS[x].产品颜色){
CatItems+='';
对于(var y=0;y';
如果(x%3==0)
CatItems+=“”;
}
$('.carousel_00 ul').html(CatItems);
},
您可以先在循环中添加以下内容:
if (x % 3 === 0) CatItems += '<div>';
if (x % 3 === 2 || x = data.PRODUCTS.length - 1) CatItems += '</div>';
if(x%3===0)CatItems+='';
这是循环中的最后一个:
if (x % 3 === 0) CatItems += '<div>';
if (x % 3 === 2 || x = data.PRODUCTS.length - 1) CatItems += '</div>';
if(x%3==2 | | x=data.PRODUCTS.length-1)CatItems+='';
这将把li
项分为三组,并在树中显示。如果您只希望每个组中第一个li
周围有div
,则第二个条件与第一个条件相同
(让我重复一下你在问题中所说的关于这在语义上不正确的内容。)%-这是模运算符。如果你将两个数字相除,它将返回整数余数。@Robert是的,如果它等于0,这是因为你已经通过了3 li,你不能将li作为div的子元素,如果你告诉浏览器做一些不可能的事情,那么一些人会做,一些人会试图弄明白你真正的意思。然后,弄清楚到底发生了什么就变成了一场噩梦。不要尝试这个。直接转到生成有效文档。如果您没有读完我的文章,我将在这里重复最后一部分。我知道这不是语义上的,也不正确,但这只是一个例子。(基本上,如果我能弄清楚如何做到这一点,我将替换li在spans上的,以及我需要在li在li上的之外的div)。这不是生产代码,如果我能找到解决方案,我会重写它。这不是“公正”的语义——插入一个空的li,附加一个ul,然后将前3个li附加到新的ul。重复上述步骤,直到您离开lis。浏览器将重写t