2013-03-14 53 views
0

嗨,我想循環通過一些json數據並輸出到頁面上,我的問題是它只顯示json中的第一項(波士頓莊園停車場) 我不能得到它的顯示第二項...循環json只爲第一項工作

的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++; 
     }); 
    }; 
+2

你'VAR rowClass'是本地循環的每個迭代。它只在'relCount'爲0時設置,否則不確定。 – 2013-03-14 19:32:50

+0

感謝我把主循環之外的'relCount'定義爲現在雖然仍然不顯示我的json中的第二項... – 2013-03-14 19:42:34

+1

您是否在需要時更新'rowClass'的值?因爲我在'$ .each'之前移動了'var rowClass',並且我看到2個項目:http://jsfiddle.net/35Jrc/7/ – 2013-03-14 20:02:43

回答

3

的問題是在你的小提琴線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/

+0

如此令人討厭,因爲當你通過代碼只讓某人擊敗你時回答哈哈。接得好。 – 75inchpianist 2013-03-14 20:16:11

+0

我確切地知道你的意思! – Nate 2013-03-14 20:18:39

+0

ahh好吧,我明白了,現在你已經指出了很多意義!當我四處張望時,我看到jQuery 1.9擁有一個新的唯一ID功能,我會更深入地觀察它,因爲一旦我經歷了3行,我將複製id(雖然我不認爲我會有9個相關項目,但爲了以防萬一,最好使用cos。 – 2013-03-14 20:26:54

相關問題