jQuery 附加行和列

Question

我有这个 javascript，当用户单击 "More" 按钮时，我用它来将文章附加到页面。如何编辑点击功能以将所有 21 篇文章包装在一行 div 中，并一次将 3 篇文章包装在 "col-sm-12" div 中？

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> ，这是从文章中提取的，但我需要将它包裹在一行和一列中。

编辑：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", constructor: 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 项目的 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 附加行和列

jQuery appending row and columns

html

javascript

jquery

append