Jquery JS只获取并循环四项_Jquery_Xml_Slide

Jquery JS只获取并循环四项

jquery xml

Jquery JS只获取并循环四项,jquery,xml,slide,Jquery,Xml,Slide,我需要一个脚本来滑动我的xml列出的汽车网页。我必须把它们显示为四边形。（1个滑道上有4辆车）。所以我写了一个代码来获取数据并将它们分成4 但它只得到循环的前4项。我的脑子停了，找不到问题 $(document).ready(function() { function itemContentBuilder(array, index) { var items = ''; items += '<div class="col-md-3">'; items += '&

我需要一个脚本来滑动我的xml列出的汽车网页。我必须把它们显示为四边形。（1个滑道上有4辆车）。所以我写了一个代码来获取数据并将它们分成4

但它只得到循环的前4项。我的脑子停了，找不到问题

$(document).ready(function() {
function itemContentBuilder(array, index) {
    var items = '';
    items += '<div class="col-md-3">';
    items += '<div class="carholder">';
    items += '<div class="firstholder">';
    items += '<div class="showthecar"><img alt="" src="' + array[index].carimage + '"></div>';
    items += '<div class="innergrey"></div></div>';
    items += '<div class="carheader">';
    items += '<span class="thebox"></span>';
    items += '<h3>' + array[index].brand + ' <span>' + array[index].model + '</span></h3>';
    items += '<div class="carprice">' + array[index].price + '</div>'
    items += '<div class="car-description">' + array[index].desc + '</div>';
    items += '<div class="car-specs">'
    items += '<ul>';
    items += '<li><img alt="" src="assets/img/icon-key.png"><span>' + array[index].spec1 + '</span></li>';
    items += '<li><img alt="" src="assets/img/icon-engine.png"><span>' + array[index].spec2 + '</span></li>';
    items += '<li><img alt="" src="assets/img/icon-gear.png"><span>' + array[index].spec3 + '</span></li>';
    items += '</ul>';
    items += '</div>';
    items += '</div>';
    items += '</div>';
    items += '</div>';
    return items;
}
var array = [];
$.ajax({
    type: "GET",
    url: "assets/js/cars.xml",
    cache: false,
    dataType: "xml",
    success: function(xml) {
        $(xml).find('car').each(function() {
            array.push({
                carimage: $(this).find('carimage').text(),
                brand: $(this).find('brand').text(),
                model: $(this).find('model').text(),
                price: $(this).find('price').text(),
                desc: $(this).find('desc').text(),
                spec1: $(this).find('spec1').text(),
                spec2: $(this).find('spec2').text(),
                spec3: $(this).find('spec3').text(),
            });
        });
        var loopCount = array.length;
        var remain = ((array.length / 4.0) - Math.floor(array.length / 4));
        if (remain < 1) {
            if (remain === 0.25) {
                loopCount = loopCount + 3;
            }
            if (remain === 0.50) {
                loopCount = loopCount + 2;
            }
            if (remain === 0.75) {
                loopCount = loopCount + 1;
            }
        }

        var content = '';
        var index = 0;
        var currentIndex = 0;
        var increaseStatus = true;
        for (var i = 0; i < loopCount; i++) {
            if (currentIndex === i) {
                currentIndex = 0;
                increaseStatus = false;
            } else if (increaseStatus) {
                currentIndex = i;
            }
            if (index === 0) {
                content += '<div class="item">';
            }
            content += itemContentBuilder(array, index);
            index++;
            currentIndex++;
            if (index === 4) {
                content += '</div>';
                index = 0;
            }
        }

        $('.carousel-inner').prepend(content);
        $('.carousel-inner').find('.item').first().addClass('active');
    },
    error: function() {
        console.log('XML Data Error!');
    }

});

$（文档）.ready（函数（）{
函数项ContentBuilder（数组、索引）{
var项目=“”；
项目+=''；
项目+=''；
项目+=''；
项目+=''；
项目+=''；
项目+=''；
项目+=''；
items+=''+数组[索引]。品牌+''+数组[索引]。型号+''；
items+=''+数组[索引].价格+''
items+=''+数组[索引].desc+''；
项目+=“”
项目+=“”；
items+=''+数组[索引].spec1+''；
items+=''+数组[索引].spec2+''；
items+=''+数组[索引].spec3+''；
项目+=''；
项目+=''；
项目+=''；
项目+=''；
项目+=''；
退货项目；
}
var数组=[]；
$.ajax({
键入：“获取”，
url:“assets/js/cars.xml”，
cache:false，
数据类型：“xml”，
成功：函数（xml）{
$（xml）.find（'car'）.each（function（）{
array.push({
carimage:$（this）.find（'carimage'）.text（），
品牌：$（this）.find（'brand'）.text（），
模型：$（this）.find（'model'）.text（），
价格：$（this）.find（'price'）.text（），
desc:$（this.find（'desc'）.text（），
spec1:$（this）.find（'spec1'）.text（），
spec2:$（this）.find（'spec2'）.text（），
spec3:$（this）.find（'spec3'）.text（），
});
});
var loopCount=array.length；
var剩余=（（array.length/4.0）-Math.floor（array.length/4））；
如果（保持<1）{
如果（保持===0.25）{
loopCount=loopCount+3；
}
如果（保持===0.50）{
loopCount=loopCount+2；
}
如果（保持===0.75）{
loopCount=loopCount+1；
}
}
var内容=“”；
var指数=0；
var currentIndex=0；
var increaseStatus=true；
对于（变量i=0；i


}))
下面是cars.xml的一个示例数据
<first>
<car>
    <carimage>assets/img/carslider/citroen.png</carimage>
    <brand>CITROEN</brand>
    <model>C-ELYSSE</model>
    <price>255 EURO + KDV</price>
    <desc>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt aliqua.</desc>
    <spec1>1.6 HDI ATTRACTION M/T - 2016</spec1>
    <spec2>92 HP</spec2>
    <spec3>MANUEL</spec3>
</car>


资产/img/carslider/citroen.png
雪铁龙
C-ELYSSE
255欧元+KDV
我的同僚们都不愿意坐在那里，因为他们都是精英，都是临时的。
1.6 2016年HDI吸引物M/T
92马力
曼努埃尔


content+=itemContentBuilder（数组、索引）
index
是您的变量，当它达到4时，您会定期将其重置为0
您想在此处使用for循环计数器变量i
，而不是索引
content+=itemContentBuilder（数组、索引）
index
是您的变量，当它达到4时，您会定期将其重置为0
您想在这里使用for循环计数器变量i
，而不是index
我们解决了如下问题。我认为这将是XML-HTML数据滑动的一个很好的示例
    // *** XML CAR LIST NORMAL *** //
$(document).ready(function() {
    function itemContentBuilder(array, index) {
        var items = '';
        items += '<div class="col-md-3">';
        items += '<div class="carholder">';
        items += '<div class="firstholder">';
        items += '<div class="showthecar"><img alt="" src="' + array[index].carimage + '"></div>';
        items += '<div class="innergrey"></div></div>';
        items += '<div class="carheader">';
        items += '<span class="thebox"></span>';
        items += '<h3>' + array[index].brand + ' <span>' + array[index].model + '</span></h3>';
        items += '<div class="carprice">' + array[index].price + '</div>'
        items += '<div class="car-description">' + array[index].desc + '</div>';
        items += '<div class="car-specs">'
        items += '<ul>';
        items += '<li><img alt="" src="assets/img/icon-key.png"><span>' + array[index].spec1 + '</span></li>';
        items += '<li><img alt="" src="assets/img/icon-engine.png"><span>' + array[index].spec2 + '</span></li>';
        items += '<li><img alt="" src="assets/img/icon-gear.png"><span>' + array[index].spec3 + '</span></li>';
        items += '</ul>';
        items += '</div>';
        items += '</div>';
        items += '</div>';
        items += '</div>';
        return items;
    }
    var array = [];
    $.ajax({
        type: "GET",
        url: "assets/js/cars.xml",
        cache: false,
        dataType: "xml",
        success: function(xml) {
            $(xml).find('car').each(function() {
                array.push({
                    carimage: $(this).find('carimage').text(),
                    brand: $(this).find('brand').text(),
                    model: $(this).find('model').text(),
                    price: $(this).find('price').text(),
                    desc: $(this).find('desc').text(),
                    spec1: $(this).find('spec1').text(),
                    spec2: $(this).find('spec2').text(),
                    spec3: $(this).find('spec3').text(),
                });
            });

            var content = '';
            var index = 0;

            var currentIndex = 0;

            var increaseStatus = true;

            var remain = ((array.length / 4.0) - Math.floor(array.length / 4));
            if (remain < 1) {
                if (remain === 0.25) {
                    array.push(array[0]);
                    array.push(array[1]);
                    array.push(array[2]);
                }
                if (remain === 0.50) {
                    array.push(array[0]);
                    array.push(array[1]);
                }
                if (remain === 0.75) {
                    array.push(array[0]);
                }
            }

            for (var i = 0; i < array.length; i++) {

                if (currentIndex === i) {
                    currentIndex = 0;
                    increaseStatus = false;

                } else if (increaseStatus) {
                    currentIndex = i;
                }
                if (index === 0) {
                    content += '<div class="item">';
                }
                content += itemContentBuilder(array, i);
                index++;
                currentIndex++;
                if (index === 4) {
                    content += '</div>';
                    index = 0;
                }
            }

            $('.carousel-inner').prepend(content);
            $('.carousel-inner').find('.item').first().addClass('active');
        },
        error: function() {
            console.log('XML Data Hatası!');
        }
    });
});

/***XML车辆列表正常***//
$（文档）.ready（函数（）{
函数项ContentBuilder（数组、索引）{
var项目=“”；
项目+=''；
项目+=''；
项目+=''；
项目+=''；
项目+=''；
项目+=''；
项目+=''；
items+=''+数组[索引]。品牌+''+数组[索引]。型号+''；
items+=''+数组[索引].价格+''
items+=''+数组[索引].desc+''；
项目+=“”
项目+=“”；
items+=''+数组[索引].spec1+''；
items+=''+数组[索引].spec2+''；
items+=''+数组[索引].spec3+''；
项目+=''；
项目+=''；
项目+=''；
项目+=''；
项目+=''；
退货项目；
}
var数组=[]；
$.ajax({
键入：“获取”，
url:“assets/js/cars.xml”，
cache:false，
数据类型：“xml”，
成功：函数（xml）{
$（xml）.find（'car'）.each（function（）{
array.push({
carimage:$（this）.find（'carimage'）.text（），
品牌：$（this）.find（'brand'）.text（），
模型：$（this）.find（'model'）.text（），
价格：$（this）.find（'price'）.text（），
desc:$（this.find（'desc'）.text（），
spec1:$（this）.find（'spec1'）.text（），
spec2:$（this）.find（'spec2'）.text（），
spec3:$（this）.find（'spec3'）.text（），
});
});
var内容=“”；
var指数=0；
var currentIndex=0；
var increaseStatus=true；
var剩余=（（array.length/4.0）-Math.floor（array.length/4））；
如果（保持<1）{
如果（保持===0.25）{
array.push（数组[0]）；
array.push（数组[1]）；
array.push（array[2]）；
}
如果（保持===0.50）{
array.push（数组[0]）；
array.push（数组[1]）；
}