每 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 函数显示我的 post 之后，我将做类似的事情来显示它们：

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

每 N 次迭代创建单元格并包装在父级中

Create cells and wrap in parent every Nth iteration

javascript

wordpress

rest

loops

modulo

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

使用数组，`.map()`，`.concat()`，箭头函数，模板文字

每 N 次迭代创建单元格并包装在父级中

Create cells and wrap in parent every Nth iteration

javascript

wordpress

rest

loops

modulo

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

使用数组，.map()，.concat()，箭头函数，模板文字

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

使用数组，`.map()`，`.concat()`，箭头函数，模板文字