循环ACF中继器字段-前4个元素并在嵌套的DIV中继续循环

Question

我在ACF中有一个中继器字段，我想定期循环并获得前4个元素，然后创建一个DIV，然后继续循环创建DIV中的其余元素。

下面是我正在努力实现的一个例子：

​

.tech-item {
margin-bottom: 30px;
}
.tech-item .val {
display: block
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-sm-6">
    <div class="tech-container">
      <div class="tech-item"><span class="val">Tech Info 1</span><span class="feature-name">Value 1</span></div>
      <div class="tech-item"><span class="val">Tech Info 2</span><span class="feature-name">Value 2</span></div>
      <div class="tech-item"><span class="val">Tech Info 3</span><span class="feature-name">Value 3</span></div>
      <div class="tech-item"><span class="val">Tech Info 4</span><span class="feature-name">Value 4</span></div>
      <div class="hidden">
        <div class="tech-item"><span class="val">Tech Info 5</span><span class="feature-name">Value 5</span></div>
        <div class="tech-item"><span class="val">Tech Info 6</span><span class="feature-name">Value 6</span></div>
        <div class="tech-item"><span class="val">Tech Info 7</span><span class="feature-name">Value 7</span></div>
        <div class="tech-item"><span class="val">Tech Info 8</span><span class="feature-name">Value 8</span></div>
        <div class="tech-item"><span class="val">Tech Info 9</span><span class="feature-name">Value 9</span></div>
        <div class="tech-item"><span class="val">Tech Info 10</span><span class="feature-name">Value 10</span></div>
      </div>
      <div class="tech-arrow"></div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="tech-container">
      <div class="tech-item"><span class="val">Tech Info 1</span><span class="feature-name">Value 1</span></div>
      <div class="tech-item"><span class="val">Tech Info 2</span><span class="feature-name">Value 2</span></div>
      <div class="tech-item"><span class="val">Tech Info 3</span><span class="feature-name">Value 3</span></div>
      <div class="tech-item"><span class="val">Tech Info 4</span><span class="feature-name">Value 4</span></div>
      <div class="hidden">
        <div class="tech-item"><span class="val">Tech Info 5</span><span class="feature-name">Value 5</span></div>
        <div class="tech-item"><span class="val">Tech Info 6</span><span class="feature-name">Value 6</span></div>
        <div class="tech-item"><span class="val">Tech Info 7</span><span class="feature-name">Value 7</span></div>
        <div class="tech-item"><span class="val">Tech Info 8</span><span class="feature-name">Value 8</span></div>
        <div class="tech-item"><span class="val">Tech Info 9</span><span class="feature-name">Value 9</span></div>
        <div class="tech-item"><span class="val">Tech Info 10</span><span class="feature-name">Value 10</span></div>
      </div>
      <div class="tech-arrow"></div>
    </div>
  </div>
</div>

​

因此，我想用一个循环创建前4个tech-item元素，然后创建hidden DIV并在hidden DIV中继续循环。

每一列都有自己的中继器字段：technical_details_left和technical_details_right

对于子字段tech_title，表示为Tech 1、2等；第二个子字段是tech_content，它表示为值1、2等等。

提前感谢

Answer 1

请试试这个：

<div class="row">
<?php
    $leftDetails = get_field('technical_details_left');
    $rightDetails = get_field('technical_details_right');
    $leftDSize = sizeof($leftDetails);
    $rightDSize = sizeof($rightDetails);
    if($leftDetails){
    ?>
    <div class="col-sm-6">
        <div class="tech-container">
        <?php foreach($leftDetails as $key=>$ldetail){
        if($key == 4){ echo '<div class="hidden">';  }  
        echo '<div class="tech-item"><span class="val">'.$ldetail['tech_title'].'</span><span class="feature-name">'.$ldetail['tech_content'].'</span></div>';
        if((($leftDSize - 1) == $key) && ($key > 3)){ echo '</div>'; } 
        } 
        echo '<div class="tech-arrow"></div>';
        echo '</div>';
        echo '</div>';  
    } ?>

<?php if($rightDetails){
    ?>
    <div class="col-sm-6">
        <div class="tech-container">
        <?php foreach($rightDetails as $key1=>$rdetail){
        if($key1 == 4){ echo '<div class="hidden">';  }     
        echo '<div class="tech-item"><span class="val">'.$rdetail['tech_title'].'</span><span class="feature-name">'.$rdetail['tech_content'].'</span></div>';
        if((($rightDSize - 1) == $key1) && ($key1 > 3)){ echo '</div>'; } 
        } 
        echo '<div class="tech-arrow"></div>';
        echo '</div>';
        echo '</div>';  
} ?>
</div>