拆分工作循環調用JSON兩個部分使用jQuery/JavaScript的

我有它加載data.root.offer[0].region呼叫到一個div .region類另一個DIV .carousel內的JSON調用一個工作循環它看起來像這樣：拆分工作循環調用JSON兩個部分使用jQuery/JavaScript的

$.getJSON('json/data.json', function(data) { 
     var regions = $('.carousel .region').length; 
     for (var i = 0; i <= regions; i++) { 
     $('.region').eq(i).html('<p>' + data.root.offer[i].region + '</p>'); 
     }; 
});

當我運行此，它僅適用於頂部轉盤

我一直在試圖複製加載要約陣列分爲8周的div與.region全班分成內的其他2周的div中8個項目的環.carousel類。

複製循環和更改i不起作用..我也嘗試更改類名稱，但沒有結果..如果有人知道一個解決方案，那真的很有用。

JSON

{"root": {"offer": [{"region": "Miami - Miami Beach", 
        "region": "Mexico - Playacar", 
        "region": "Cuba - Veradero", 
        "region": "Jamaica - Montego Bay", 
        "region": "Dominican Republic - Bavaro", 
        "region": "Turkije - Belek", 
        "region": "Turkije - Belek", 
        "region": "Turkije - Side", 
        "region": "Tunesië - Hammamet Yasmine ", 
        "region": "Egypte - Sharm El Sheikh" 
}]}}

HTML：

<div class="carousel" tabindex="4"> 
      <div class="frame"> 
       <div class="region"> 
        <p>miami beach1<p> 
       </div> 
      </div> 
      <div class="frame"> 
       <div class="region"> 
        <p>miami beach2<p> 
       </div> 
      </div> 
      <div class="frame"> 
       <div class="region"> 
        <p>miami beach3<p> 
       </div> 
      </div> 
      <div class="frame"> 
       <div class="region"> 
        <p>miami beach4<p> 
       </div> 
      </div> 
    </div> 
    <div class="carousel" tabindex="4"> 
      <div class="frame"> 
       <div class="region"> 
        <p>miami beach5<p> 
       </div> 
      </div> 
      <div class="frame"> 
       <div class="region"> 
        <p>miami beach6<p> 
       </div> 
      </div> 
      <div class="frame"> 
       <div class="region"> 
        <p>miami beach7<p> 
       </div> 
      </div> 
      <div class="frame"> 
       <div class="region"> 
        <p>miami beach8<p> 
       </div> 
      </div> 
    </div>

來源

2015-06-27 Mathias Van der brempt

什麼控制檯說？你從0到長度迭代，你應該從0迭代到長度-1。你沒有得到一個致命的錯誤，阻止腳本的其餘部分執行嗎？ – NotGaeL

此外，您使用$（'。carousel .region'）選擇器的大小，然後你迭代使用不同的$（'。region'）選擇器獲得的列表使用該大小作爲限制，這是沒有意義的所有。你打算怎麼樣？ – NotGaeL

這就是它記錄的內容：Uncaught TypeError：無法讀取未定義的屬性'region'（匿名函數）@main.js：13m.Callbacks.j @jquery.1.11.1.min.js：2m.Callbacks.k.fireWith @ jquery.1.11.1.min.js：2x @ jquery.1.11.1.min.js：4m.ajaxTransport.send.b @ jquery.1.11.1.min.js：4 –

$(function(){ 
 
    /* $.getJSON('http://beta.json-generator.com/api/json/get/Fx2DlmM', function(data) { 
 
     var regions = $('.carousel .region').length; 
 
     for (var i = 0; i < regions; i++) { 
 
     $('.region').eq(i).html('<p>' + data.root.offer[i].region + '</p>'); 
 
     }; 
 
    }); */ 
 

 
    //if diff classes 
 

 
    $.getJSON('http://beta.json-generator.com/api/json/get/Fx2DlmM', function(data) { 
 
     var $carousel1 = $('.carousel1 .region'); 
 
     var $carousel2 = $('.carousel2 .region'); 
 
     var offers = data.root.offer; 
 
     var regions = $('.region').length; 
 
     for (var i = 0; i < regions/2; i++) { 
 
     $carousel1.eq(i).html('<p>' + offers[i].region + '</p>'); 
 
     } 
 
     for (var j = 0; j < regions/2; j++,i++) { 
 
     $carousel2.eq(j).html('<p>' + offers[i].region + '</p>'); 
 
     } 
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Carousal 1<div class="carousel1" tabindex="4"> 
 
      <div class="frame"> 
 
       <div class="region"> 
 
        <p>miami beach1<p> 
 
       </div> 
 
      </div> 
 
      <div class="frame"> 
 
       <div class="region"> 
 
        <p>miami beach2<p> 
 
       </div> 
 
      </div> 
 
      <div class="frame"> 
 
       <div class="region"> 
 
        <p>miami beach3<p> 
 
       </div> 
 
      </div> 
 
      <div class="frame"> 
 
       <div class="region"> 
 
        <p>miami beach4<p> 
 
       </div> 
 
      </div> 
 
    </div> 
 
Carousal 2 <div class="carousel2" tabindex="4"> 
 
      <div class="frame"> 
 
       <div class="region"> 
 
        <p>miami beach5<p> 
 
       </div> 
 
      </div> 
 
      <div class="frame"> 
 
       <div class="region"> 
 
        <p>miami beach6<p> 
 
       </div> 
 
      </div> 
 
      <div class="frame"> 
 
       <div class="region"> 
 
        <p>miami beach7<p> 
 
       </div> 
 
      </div> 
 
      <div class="frame"> 
 
       <div class="region"> 
 
        <p>miami beach8<p> 
 
       </div> 
 
      </div> 
 
    </div>

來源

2015-06-27 17:27:30 vinayakj

不確定您的實際需求，但上面的結果是否符合您的要求，否則請解釋您的預期結果/ carousal應該看起來像 – vinayakj

更新了這兩個代碼片段，相同類別和不同類別的答案。確認它是否解決了您的問題，然後爲您提供優化的代碼，在確認所需內容之前沒有感覺要進行優化。 – vinayakj

耶很棒，這就是我正在尋找的感謝！ –

幾件事情你的代碼錯誤：

首先，你所提供的JSON是無效的（資產區域被repited）。試試這個：

{ 
    "root": { 
    "offer": [ 
     { 
     "region": "Miami - Miami Beach" 
     }, 
     { 
     "region": "Mexico - Playacar" 
     }, 
     { 
     "region": "Cuba - Veradero" 
     }, 
     { 
     "region": "Jamaica - Montego Bay" 
     }, 
     { 
     "region": "Dominican Republic - Bavaro" 
     }, 
     { 
     "region": "Turkije - Belek" 
     }, 
     { 
     "region": "Turkije - Belek" 
     }, 
     { 
     "region": "Turkije - Side" 
     }, 
     { 
     "region": "Tunesië - Hammamet Yasmine " 
     }, 
     { 
     "region": "Egypte - Sharm El Sheikh" 
     } 
    ] 
    } 
}

然後，有一些問題在您的JS：

$.getJSON('json/data.json', function(data) { 

     var regions = $('.carousel .region').length; 

     // wrong limit. data.root.offer[regions] does not exist. Try this instead: 
     for (var i = 0; i < regions; i++) { 

     // wrong selector. Be consistent and try this instead: 
     $('.carousel .region').eq(i).html('<p>' + data.root.offer[i].region + '</p>'); 

     }; 

});

此外，您可能需要使用.each()，而不是選擇並在一堆元素的執行操作，並且你應該保護你的代碼不受短/不存在的數組。就像這樣：

$(function(){ 
 
    $.getJSON('http://beta.json-generator.com/api/json/get/LFdizev', function(data) { 
 
     $('.carousel .region').each(function(i, el){ 
 
     try { 
 
     $(this).html('<p>' + data.root.offer[i].region + '</p>'); 
 
     } catch (e) { 
 
     // handle size mismatch 
 
     } 
 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Carousal 1<div class="carousel" tabindex="4"> 
 
      <div class="frame"> 
 
       <div class="region"> 
 
        <p>miami beach1<p> 
 
       </div> 
 
      </div> 
 
      <div class="frame"> 
 
       <div class="region"> 
 
        <p>miami beach2<p> 
 
       </div> 
 
      </div> 
 
      <div class="frame"> 
 
       <div class="region"> 
 
        <p>miami beach3<p> 
 
       </div> 
 
      </div> 
 
      <div class="frame"> 
 
       <div class="region"> 
 
        <p>miami beach4<p> 
 
       </div> 
 
      </div> 
 
    </div> 
 
Carousal 2 <div class="carousel" tabindex="4"> 
 
      <div class="frame"> 
 
       <div class="region"> 
 
        <p>miami beach5<p> 
 
       </div> 
 
      </div> 
 
      <div class="frame"> 
 
       <div class="region"> 
 
        <p>miami beach6<p> 
 
       </div> 
 
      </div> 
 
      <div class="frame"> 
 
       <div class="region"> 
 
        <p>miami beach7<p> 
 
       </div> 
 
      </div> 
 
      <div class="frame"> 
 
       <div class="region"> 
 
        <p>miami beach8<p> 
 
       </div> 
 
      </div> 
 
    </div>

來源

2015-06-27 17:18:26 NotGaeL

'.each'函數還提供'index'，不需要使用單獨的'i'索引變量。像這樣'.each（function（index，ele）'。 – vinayakj

不錯的觀察。有用的信息:-) – NotGaeL

拆分工作循環調用JSON兩個部分使用jQuery/JavaScript的

回答

相關問題