jQuery追加行和列答案

【问题标题】：jQuery appending row and columnsjQuery追加行和列
【发布时间】：2015-02-11 01:04:08
【问题描述】：

当用户单击“更多”按钮时，我有这个 javascript 用于将文章附加到页面。如何编辑点击功能以将所有 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.\'文章预览\', li.\'文章预览\', li.\'文章预览\', li.\'文章预览\', li.\'文章预览\', li.\'文章预览\', li.\'文章预览\', li.\'文章预览\', li.\'文章预览\', li.\'文章预览\', li.\'文章预览\', li.\'文章预览\', li.\'文章预览\', li.\'文章预览\', li.\'文章预览\', li.\'文章预览\', li.\'文章预览\', li.\'文章预览\', li.\'article-preview\'，jquery：“2.1.1”，构造函数：函数，选择器：“”，toArray：函数，获取：函数...]....

【问题讨论】：

标签： javascript jquery html append

【解决方案1】：

您可以获取 AJAX 调用的响应，将其解析为 jQuery 对象，找到 .article-preview 项目，循环它们，创建一个打开 .row div 的 html 字符串变量，然后使用模数运算符 (%) 您可以打开和关闭 .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));
        }
    });
});

【讨论】：

这似乎是我想要的正确方法，但由于某种原因，成功块中发生的任何事情实际上都不会被触发。我的意思是代码正在运行（我可以记录响应并且它是正确的），但实际上并没有对页面的 html 进行这些更改。知道为什么吗？
看起来 $response.find('article-preview') 找不到任何这些元素。我用收到的回复编辑了我的帖子，猜想我需要更改“.article-preview”的语法
尝试使用 $response.filter('.article-preview') 代替 .find()

【解决方案2】：

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

  });
});

如果您根据自己的设置进行调整，这些方面的东西应该可以工作。

【讨论】：