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

Question

最近我创建了一个工具，以利用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);
  }
}

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

可能是这样的吗？

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

或者在PHP中使用modulo？ （两者都不起作用）：

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 ...或者它＆ ＃39; s new_loop_js？
不要在DOM里面附加for循环。这是一次非常详尽的操作。构建您的项目，然后附加最终连接的HTML字符串仅一次。

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

＆＃13;

＆＃13;

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);

＆＃13;

/*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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

您可以使用功能方法。这是 ES6 - 时尚方式：

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

＆＃13;

＆＃13;

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);

＆＃13;

/*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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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