循环 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，表示为技术信息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>