javascript - 使用 jquery/javascript 将工作 for 循环调用 JSON 分为两部分

Question

我有一个 JSON 调用的工作循环，它将 data.root.offer[0].region 调用加载到另一个 div 中具有类 .region 的 div 中.carousel 它看起来像这样:

  $.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 个项目加载到 8 个 div 中，并用 .region 类将 .region 类划分到其他 2 个 div 中，并使用 .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>

Answer 1

$(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>