Question

我有一些代码格式如下：

<div id="section">
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
</div>

有可在本节列的任意数目（偶数或奇数）。

我想要的是这样重新格式化：

<div id="section">
    <div class="row">
        <div class="col-xs-6"></div>
        <div class="col-xs-6"></div>
    </div>
    <div class="row">
        <div class="col-xs-6"></div>
        <div class="col-xs-6"></div>
    </div>
    <div class="row">
        <div class="col-xs-6"></div>
        <div class="col-xs-6"></div>
    </div>
    <div class="row">
        <div class="col-xs-6"></div>
    </div>
</div>

下面是我尝试这样做的：

for (var x = 0; x < $('#section').children().length; x+=2) {
    var firstSection = $('#section').children().eq(x);
    if ($('#section').children().length >= x + 1) {
        var secondSection = $('#section').children().eq(x + 1);
        var finalSection = '<div class="row">' + firstSection.parent().html() + secondSection.parent().html() + '</div>';
        secondSection.remove();
    }
    else {
        var finalSection = '<div class="row">' + firstSection.html() + '</div>';
    }

    firstSection.remove();
    $('#section').append(finalSection);
}

如果有人想要一些额外的乐趣，您可以尝试允许它也处理可变的列宽！（尽管我的项目不需要这个。）

Answer 1

她是一个遍历各列的示例，与您现在尝试的类似。

它使用find()，append()和clone()完成此任务。作为一项附加功能，我将其包装到一个接受行大小作为参数的函数中。

//breaks up the section into rows of size 'rowSize', 2 by default.
function breakitup(rowSize = 2) {
  var $section = $("#section"); //get the section
  var $row = $("<div class='row'>"); //make a template for a row
  var cols = $section.find("div"); //get the columns
  var working; //tmp variable for the current row
  
  for (var i = 0; i < cols.length; i++) {
    if (i % rowSize == 0) working = $row.clone(); //clone the template when appropriate
    $(working).append(cols[i]); //add the column to the row
    if ($(working).children().length == rowSize) 
      $section.append(working); //add the row to the section as appropriate
  }
  $section.append(working); //add the last row
}
//call our fancy function
breakitup();

.row {
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="section">
  <div class="col-xs-6">test</div>
  <div class="col-xs-6">test2</div>
  <div class="col-xs-6">test3</div>
  <div class="col-xs-6">test4</div>
  <div class="col-xs-6">test5</div>
  <div class="col-xs-6">test6</div>
  <div class="col-xs-6">test7</div>
</div>

Answer 2

您可以使用.wrapall()，.add()和:even选择器：

$('#section > div:even').each(function(idx, ele) {
    $(ele).add($(this).next()).wrapAll($('<div/>', {class: 'row'}));
});


console.log($('#section').html());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="section">
    <div class="col-xs-6">1</div>
    <div class="col-xs-6">2</div>
    <div class="col-xs-6">3</div>
    <div class="col-xs-6">4</div>
    <div class="col-xs-6">5</div>
    <div class="col-xs-6">6</div>
    <div class="col-xs-6">7</div>
</div>

jQuery的动态包装在行自举列

2 个答案: