Question

您好我正在尝试循环浏览一些json数据并将其输出到页面上，我的问题是它只显示json中的第一项，（波士顿庄园停车场）我不能让它显示第二项......

HTML：

<span class='showOnMap' 
     data-related='[
            {"id":"5","slug":"boston-manor-park-car-park","name":"Boston Manor Park car park","image":"","pinType":"ub","addr":"Boston Manor Road, London  ","lat":"51.48967509541307","lng":"-0.3164195004638941","contact":"Reel Film Locations: ","restrictions":"Shared use with park users. 6 classic 1960 Tower Blocks"},
            {"id":"4","slug":"gunnersbury-park-car-park","name":"Gunnersbury Park car park","image":"","pinType":"ub","addr":"Popes Lane, London  W3 8LQ","lat":"51.49963692687797","lng":"-0.29188622747801674","contact":"Reel Film Locations: 0845 402 2998","restrictions":"Shared use with sports ground users.  Weekends in season are busy with the public. 6 classic 1960 Tower Blocks"}
        ]'>
         click me
</span>
<div class="relatedHeader">Unit Bases near by:</div>
<div class="relatedDetails">

</div>

JS：

$('.showOnMap').click(function(){
    //alert('click');
    var myRelated = $(this).data('related');

    createRelated(myRelated)
    //addToPanel(panelData);
})     
function createRelated(myRelated){
        var relCount = 0;
        var rowCount = 0;
        var itemCount = 0;
            var relCount = 0;
        $.each(myRelated, function(k, v) {
            if(relCount == 3){
                relCount = 0;
            };
            // create a new row
            if(relCount == 0){
                var rowClass = 'relRow'+rowCount;
                //alert('new row class: .'+rowClass);
                $("<div></div>")
                .addClass("detailRow "+rowClass)
                .appendTo(".relatedDetails");
                rowCount++;
            }
            // create a new related item div
            var itemClass = 'item'+itemCount;
            //alert('new item class: .'+itemClass);
            $("<div></div>")
            .addClass("relatedItem "+itemClass)
            .appendTo('.'+rowClass);

            //$('.'+rowClass).append('.'+itemClass);
            // now loop through the keys and values and add the data
            //add the data to the related item
            $('.'+itemClass).data('location',this);
            //add item to to our row

            //$.each(obj, function(k, v) {
                  //tmp = {"id":"5","slug":"boston-manor-park-car-park","name":"Boston Manor Park car park","image":"","pinType":"ub","addr":"Boston Manor Road, London ","lat":"51.48967509541307","lng":"-0.3164195004638941","contact":"Reel Film Locations: ","restrictions":"Shared use with park users. External features unavaliable at present"};
                //if(k=='image'){
                    $('<img/>')
                    .addClass('relatedImage')
                    .attr("src", v.image)
                    .appendTo('.'+itemClass)
                //}
                //if(k=='name'){
                    $('<div></div>')
                    .addClass('relatedTitle')
                    .html(v.name)
                    .appendTo('.'+itemClass)
                //}
            //});
            itemCount++;
            relCount++;
        });
    };

Answer 1

问题在于你小提琴的第32行：

.appendTo('.'+rowClass);

检查rowClass循环的每次迭代中$.each等于什么。它仅在满足此条件时第一次定义：

if(relCount == 0){
    var rowClass = 'relRow'+rowCount;
}

您应该更改存储添加项目的行的方式。（第17和30行的变化。）

$('.showOnMap').click(function(){
    var myRelated = $(this).data('related');

    createRelated(myRelated);
});


function createRelated(myRelated){

    // Clear any previous content
    $('.relatedDetails').html('');

    var relCount = 0;
    var rowCount = 0;
    var itemCount = 0;
    var relCount = 0;

    // Store a reference to the current row
    var row = '';

    console.log('myRelated', myRelated);
    $.each(myRelated, function(k, v) {
        console.log('k, v', k, v);
        console.log('relCount', relCount);
        if (relCount == 3) {
            relCount = 0;
        };
        // create a new row
        if(relCount == 0){
            rowClass = 'relRow'+rowCount;

            // Save the row you're creating
            row = $("<div></div>")
            .addClass("detailRow "+rowClass)
            .appendTo(".relatedDetails");
            rowCount++;
        }
        // create a new related item div
        var itemClass = 'item'+itemCount;
        //alert('new item class: .'+itemClass);
        var newItem = $("<div></div>")
        .addClass("relatedItem "+itemClass)
        .appendTo(row);

        //$('.'+rowClass).append('.'+itemClass);
        // now loop through the keys and values and add the data
        //add the data to the related item
        newItem.data('location',this);
        //add item to to our row



        //if(k=='image'){
        $('<img/>')
        .addClass('relatedImage')
        .attr("src", v.image)
        .appendTo('.'+itemClass)
        //}
        //if(k=='name'){
        $('<div></div>')
        .addClass('relatedTitle')
        .html(v.name)
        .appendTo('.'+itemClass)
        //}

        itemCount++;
        relCount++;
    });
};

您可以在此处看到它：http://jsfiddle.net/cYavP/1/

循环通过json只为第一项工作

1 个答案: