looping через json только для первого элемента

Question

Привет, я пытаюсь пропустить некоторые данные json и вывести их на страницу, моя проблема в том, что это только отображение первого элемента в json, (boston manor car park) i can not получить его, чтобы отобразить второй пункт ...

jsFiddle: http://jsfiddle.net/35Jrc/6/

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/