Boostrap два деления бок о бок от результата AJAX

Question

Надеюсь, кто-нибудь может помочь. Мне нужно выложить два элемента div из двух результатов ajax с разным количеством результатов.

Вот мой код:

$.each(data['middle'], function(q, z){
    $(".dep_boutique").append("<div class='row'><div class='col-sm-4'><h5 class='h5'>" + z.dep_middle_ret + "</h5></div><div class='col-sm-4'><a href='" + z.dep_middle_ret_url + "'> VIEW </a></div>");
});

$.each(data['middle_adv'], function(q, z){
    $(".dep_boutique").append("<div class='col-sm-4'><img src='admin/ads/small/" + z.dep_middle_ret_adv + "' class='img-fluid'></div></div>");
});

Примечание: второй $ .each будет иметь только три результата, тогда как первый может иметь много.

Мне нужно получить этот макет:

1   2   A
3   4   B
5   6   C
7   8
9  10 ...etc.

То, что я получаю с помощью приведенного выше кода:

1   2
3   4
5   6
7   8
9  10 ... etc.
A   B   C

Большое спасибо за вашу помощь!

Answer 1

Это пример структуры HTML Bootstrap:

<div class="container">
    <div class="row">
        <div class="col-8">
          <div class="row array_1"></div>
        </div>
        <div class="col-4">
          <div class="row array_2"></div>
        </div>
    </div>
</div>

Я пытался воссоздать ваш успех Ajax data:

var data= {
     middle:[{
            id: "1"
        },{
            id: "2"
        },{
            id: "3"
        },{
            id: "4"
        },{
            id: "5"
        },{
            id: "6"
        },{
            id: "7"
        },{
            id: "8"
        }],
    middle_adv:
        [{
            id: "a"
        },{
            id: "b"
        },{
            id: "c"
        }]
};

Теперь, когда у нас есть data и структура HTML, мы можем делать наши циклы, используя 2 переменные, может быть, это проще для понимания:

var html_1="";

$.each(data['middle'], function(q, z){
    html_1 +="<div class='col-sm-6'>"+z.id+"</div>";
});

$(".array_1").append(html_1);

// -----------------------------------

var html_2="";

$.each(data['middle_adv'], function(q, z){
    html_2 +="<div class='col-12'>"+z.id+"</div>";
});

$(".array_2").append(html_2);

Это результат:

/*This is an example of your data in return to your Ajax call */

	var data= {
	 	middle:[{
			    id: "1"
			}, {
			    id: "2"
			}, {
			    id: "3"
			},{
			    id: "4"
			},{
			    id: "5"
			},{
			    id: "6"
			},{
			    id: "7"
			},{
			    id: "8"
			}],
		middle_adv:
			[{
			    id: "a"
			}, {
			    id: "b"
			}, {
			    id: "c"
			}]
	};

  /* Put this in your Ajax done() handler  */
  
	var html_1="";

	/* Loop the second array */
	$.each(data['middle'], function(q, z){
		html_1 +="<div class='col-6'>"+z.id+"</div>";
	});

	$(".array_1").append(html_1);

	// -----------------------------------

	var html_2="";

	/* Loop the second array */
	$.each(data['middle_adv'], function(q, z){
		html_2 +="<div class='col-12'>"+z.id+"</div>";
	});

	$(".array_2").append(html_2);

.col-6{
  background-color: #ff0000;
}

.col-12{
  background-color: #00ff00;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-8">
      <div class="row array_1">
      </div>
    </div>
    <div class="col-4">

      <div class="row array_2">

      </div>

    </div>
  </div>
</div>

Надеюсь, это поможет! :)

Answer 2

Брат выложи код после класса .dep_boutique и попробуй еще раз. надеюсь, вы получите желаемый результат.

<div class='dep_boutique'>
   <div class='row'>
   <!-- ALL your append col-sm-4 divs here -->
   </div>
</div>