每第 N 次迭代创建单元格并在父级中换行

Question

最近我创建了一个工具，以便利用 Wordpress 中的 REST-API，而不是循环，来创建我显示的博客的布局。

到目前为止一切都很好，问题是我的 loop 非常漂亮和复杂，所以我能够每 3 列关闭 row 标签，这样我就可以换行了我的列采用了很好的 3 列布局。

使用 php 我做了以下操作：

<?php $the_query = new WP_Query(); 
while ($the_query->have_posts()) :
    $the_query->the_post(); ?>
    <?php
    if ((($the_query->current_post+1) % 3 == 0) && ($the_query->current_post+1 !== count($the_query->posts))):
        echo "</div><div class='row'>";

    endif;
endwhile;
?>

现在剩下的 api 就是另一回事了。我的循环是这样的：

在我运行 ajax 函数来显示我的帖子后，我会做类似的事情来显示它们：

function create_post_list(object) {
  $('.content').append('<div class="row"></div>');
  var new_loop_js;

  for(var i=0; i<object.length; i++) {
    new_loop_js =
    '<div class="col-md-3">' +
    '<a href="javascript:void(0)" data-id="' + object[i].id + '">' +
    object[i].title.rendered +
    '</a>' +
    '</div>';

    $('.content .row').append(nav_list_item);
  }
}

关于如何进行模计算的任何想法，以便每 3 列我可以关闭我的 DIV .row 并打开另一个 - 以包装其他三个子元素？

大概是这样的吧？

if ( i == 2 ) {
  new_loop_js += '</div><div class="row">';
}

或者在 PHP 中使用模数？ （他们都没有工作）：

if ( i+1 % 3 == 0) {
  nav_list_item += '</div><div class="row">';
}

Answer 1

您正在寻找的是：

if ( i > 0   &&   i % 3 === 0 )  {  /*CLOSE,OPEN ROW*/ }
/*CONCATENATE CELLS HERE*/

所以，除了错误的i+1 % 3 == 0 之外，它不起作用，因为您要附加不存在的内容：nav_list_item... 还是new_loop_js？
不要在 for 循环中附加到 DOM。这是一个非常详尽的操作。构建您的项目，然后将最终连接的 HTML 字符串仅追加一次。

使用for 循环和字符串连接：

function create_post_list( posts ) {
  
  var HTML = '<div class="row">'; // Init row
  
  for(var i=0; i<posts.length; i++) {
  
    if(i>0 && i%3===0) { // Close row if: not first iteration and i MOD 3 == 0
      HTML += '</div><div class="row">';
    }
  
    HTML += '<div class="col-md-3"><a href="javascript:void(0)" data-id="'+ posts[i].id + '">' +
    posts[i].title.rendered + '</a></div>';
  }
  
  HTML += '</div>'; // Close row
  
  $('.content').append( HTML ); // Append only once
}

var queryPosts = [
  {id:1, title:{rendered:"Foo"}},
  {id:2, title:{rendered:"Bar"}},
  {id:3, title:{rendered:"Baz"}},
  {id:4, title:{rendered:"Faz"}},
  {id:5, title:{rendered:"Zab"}},
  {id:6, title:{rendered:"Fab"}},
  {id:7, title:{rendered:"Arb"}},
  {id:8, title:{rendered:"Bra"}},
]
create_post_list(queryPosts);

/*QuickReset*/*{margin:0;box-sizing:border-box;}html,body{height:100%;font:14px/1.4 sans-serif;}

.row {
  overflow: auto;
  padding: 10px;
  background:#aaa;
  margin: 10px;
}

.col-md-3 {
  width: 25%;
  padding: 20px;
  background:#ddd;
  float:left;
}

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div class="content"></div>

你也可以用功能的方法。这是一种 ES6 时尚方式：

使用数组、.map()、.concat()、箭头函数、模板字面量

const create_post_list = posts => {

  const htmlArr = [].concat(
    `<div class="row">`,
    posts.map((ob, i) => `
      ${ i>0 && i%3===0 ? `</div><div class="row">` : '' }
        <div class="col-md-3">
          <a href="javascript:;" data-id="${ ob.id }">
            ${ ob.title.rendered }
          </a>
        </div>
    `),
    `</div>`
  );

  $('.content').append(htmlArr.join(""));
}


let queryPosts = [
  {id:1, title:{rendered:"Foo"}},
  {id:2, title:{rendered:"Bar"}},
  {id:3, title:{rendered:"Baz"}},
  {id:4, title:{rendered:"Faz"}},
  {id:5, title:{rendered:"Zab"}},
  {id:6, title:{rendered:"Fab"}},
  {id:7, title:{rendered:"Arb"}},
  {id:8, title:{rendered:"Bra"}},
];
create_post_list(queryPosts);

/*QuickReset*/*{margin:0;box-sizing:border-box;}html,body{height:100%;font:14px/1.4 sans-serif;}

.row {
  overflow: auto;
  padding: 10px;
  background: #aaa;
  margin: 10px;
}

.col-md-3 {
  width: 25%;
  padding: 20px;
  background: #ddd;
  float: left;
}

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div class="content"></div>

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals