javascript - 每隔N次创建单元并包装父级

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

到目前为止，问题是我的循环非常漂亮且复杂，因此我能够每3列关闭一次行标记，因此可以将列包装成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);
  }
}

关于如何进行模计算的任何想法，这样每隔三列我就可以关闭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">';
}

最佳答案

您正在寻找的是：

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