Question

希望有人可以提供帮助。我需要从两个具有不同结果数的ajax结果中并排布置两个div。

这是我的代码：

$.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>");
});

注意：第二个$。每个将只有三个结果，而第一个可能会有很多结果。

我需要获得以下布局：

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>

从ajax结果并排两个div

2 个答案: