Question

我有这个javascript用于在用户点击“更多”按钮时将文章附加到页面。如何编辑on click函数以包装行div中的所有21篇文章，并在“col-sm-12”div中一次包装3个？

var buildUrl= function(offset){
    var url = window.location.pathname;
    url += '?offset=' + offset

    return url;
  }

  var articleOffset = 0;
  $('.blog .load-more').on("click", function(e){
    e.preventDefault();
    articleOffset += 21;
    var url = buildUrl(articleOffset);

    $.ajax({
      type:"GET",
      dataType: "script",
      url: url,
      complete: function(){
        //$('blog .load-more a').prop('href', buildUrl(articleOffset + 21));
      }
    });
  });

现在它只是附加了21 <li class="article-preview"> ... </li>，它取自文章，但我需要它包裹在一行和col。

编辑：ajax回复

[text，li。\'article-preview \'，li。\'article-preview \'， li。\'article-preview \'，li。\'article-preview \'， li。\'article-preview \'，li。\'article-preview \'， li。\'article-preview \'，li。\'article-preview \'， li。\'article-preview \'，li。\'article-preview \'， li。\'article-preview \'，li。\'article-preview \'， li。\'article-preview \'，li。\'article-preview \'， li。\'article-preview \'，li。\'article-preview \'， li。\'article-preview \'，li。\'article-preview \'， li。\'article-preview \'，li。\'article-preview \'， li。\'article-preview \'，jquery：“2.1.1”，构造函数：function， selector：“”，toArray：function，get：function ...] ....

Answer 1

var data = yourJsonData; // Your parsed Json
var flag = 0; // A flag for adding the first Div
var whichGroup = 0; // lets us know which block of 3 items we are adding to.
$('.blog .load-more').on("click", function(e){
// Loop through the data
  $.each(data, function (index) { 
// Append the first div
  if (flag==0){
  $('#article-wrapper').append('<div id="batch-parent"></div>');
  }
flag = flag + 1;
// add a div to the parent div we just added every 3 items
  if ( index % 3 === 0 ){
  whichGroup = index;
  $('#batch-parent').append('<div class="col-sm-12" id="batch-group'+index+'"></div>');

  }
// find out the ID of the current div of 3 items and add item to it
  var currentBatch = '#batch-group'+whichGroup;
  $(currentBatch).append('<div> YOUR CONTENT</div>');

  });
});

如果您根据自己的设置进行调整，这些内容中的某些内容应该有效。

Answer 2

您可以获取AJAX调用的响应，将其解析为jQuery对象，找到.article-preview项，循环遍历它们，创建一个html字符串变量，打开.row div，然后使用模数运算符（%），您可以打开和关闭.col-sm-12项，同时继续追加.article-preview项目＆＃39; outerHTML变量html。

这样的事情：

var buildUrl= function(offset){
    var url = window.location.pathname;
    url += '?offset=' + offset

    return url;
}

var articleOffset = 0;
$('.blog .load-more').on("click", function(e){
    e.preventDefault();
    articleOffset += 21;
    var url = buildUrl(articleOffset);

    $.ajax({
        type:"GET",
        dataType: "script",
        url: url,
        success: function(response){
            var $response = $($.parseHTML(response)),
                html = '<div class="row"><div class="col-sm-12">';

            $response.find('.article-preview').each(function(index, element){
                if (index > 0 && index % 3 === 0 ) {
                    html += '</div><!-- .col-sm-12 --><div class="col-sm-12">';
                }
                html += element.outerHTML;
            });
            html += '</div><!-- .col-sm-12 --></div><!-- .row -->';
            $('blog .load-more').before(html); // may want to change this.
        },
        complete: function(){
            //$('blog .load-more a').prop('href', buildUrl(articleOffset + 21));
        }
    });
});

jQuery追加行和列

2 个答案: