Question

我有一个父div，有19个子div，具有相同的类，如下所示：

<div id="dropdown-content1">
    <div class="CatsColumn"></div>
    <div class="CatsColumn"></div>
    <div class="CatsColumn"></div>
    <div class="CatsColumn"></div>
    <div class="CatsColumn"></div>
    <div class="CatsColumn"></div>
    <div class="CatsColumn"></div>
    <div class="CatsColumn"></div>
    <div class="CatsColumn"></div>
    <div class="CatsColumn"></div>
    <div class="CatsColumn"></div>
    <div class="CatsColumn"></div>
    <div class="CatsColumn"></div>
    <div class="CatsColumn"></div>
    <div class="CatsColumn"></div>
    <div class="CatsColumn"></div>
    <div class="CatsColumn"></div>
    <div class="CatsColumn"></div>
    <div class="CatsColumn"></div>
</div>

这是动态构建的，所以我需要jQuery将它包装成具有相同类名的3列。我理解了一点jquery所以我假设.wrap（）会被使用，但我的问题是我不知道如何告诉jquery抓住前7个，然后是下7个，以及然后剩下的5并将它们包装在各个div中，所以我有3列。我感谢任何帮助！

Answer 1

使用CSS实现此目的的一种方法是使用column-count。请参阅CSS multi-column layouts。

#dropdown-content1 {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
}

#dropdown-content1 {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
}

<div id="dropdown-content1">
  <div class="CatsColumn">1</div>
  <div class="CatsColumn">2</div>
  <div class="CatsColumn">3</div>
  <div class="CatsColumn">4</div>
  <div class="CatsColumn">5</div>
  <div class="CatsColumn">6</div>
  <div class="CatsColumn">7</div>
  <div class="CatsColumn">8</div>
  <div class="CatsColumn">9</div>
  <div class="CatsColumn">10</div>
  <div class="CatsColumn">11</div>
  <div class="CatsColumn">12</div>
  <div class="CatsColumn">13</div>
  <div class="CatsColumn">14</div>
  <div class="CatsColumn">15</div>
  <div class="CatsColumn">16</div>
  <div class="CatsColumn">17</div>
  <div class="CatsColumn">18</div>
  <div class="CatsColumn">19</div>
</div>

如果你真的需要在列中添加包装器，你可以这样做以生成如下的DOM：

<div id="dropdown-content1">
    <div class="ColWrapper">
        <div class="CatsColumn"></div>
        ...
    </div>
    <div class="ColWrapper">
        <div class="CatsColumn"></div>
        ...
    </div>
    ...
</div>

let columns = 3;
let elements = 19;

let elementsPerCol = Math.ceil(elements / columns);

let $dropdownContent = $("#dropdown-content1");
var $colWrapper;

var currentCol = -1;
for (var i = 0; i < elements; i++) {
  if (currentCol < Math.floor(i / elementsPerCol)) {
    // Create a new wrapper whenever the existing 
    // column is completely filled with elements.
    $colWrapper = $('<div class="ColWrapper"></div>').appendTo($dropdownContent);
    currentCol++;
  }

  // Generate the column element, and append to the
  // current wrapper.
  $colWrapper.append('<div class="CatsColumn">' + i + '</div>');
}

.ColWrapper {
  outline: 1px #AAA solid;
  width: 33%;
  display: inline-block;
  vertical-align: top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropdown-content1">
</div>

Answer 2

使用slice()：

的方法略有不同

（编辑为我已经看到所有人都添加了改进，所以我也试过了：））

＆＃13;

len=$('.CatsColumn').length;
cols=3; //number of desired columns
rows=Math.ceil(len/cols);


for(i=0;i<len;i+=rows) {

$('.CatsColumn').slice(i,i+rows).wrapAll("<div class='column'></div>");

}

＆＃13;

.column {
  display:inline-block;
  border:1px solid red;
  vertical-align:top;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropdown-content1">
    <div class="CatsColumn">1</div>
    <div class="CatsColumn">2</div>
    <div class="CatsColumn">3</div>
    <div class="CatsColumn">4</div>
    <div class="CatsColumn">5</div>
    <div class="CatsColumn">6</div>
    <div class="CatsColumn">7</div>
    <div class="CatsColumn">8</div>
    <div class="CatsColumn">9</div>
    <div class="CatsColumn">10</div>
    <div class="CatsColumn">11</div>
    <div class="CatsColumn">12</div>
    <div class="CatsColumn">13</div>
    <div class="CatsColumn">14</div>
    <div class="CatsColumn">15</div>
    <div class="CatsColumn">16</div>
    <div class="CatsColumn">17</div>
    <div class="CatsColumn">18</div>
    <div class="CatsColumn">19</div>
</div>

＆＃13;

Answer 3

你可以创建一个jQuery插件来完成这项工作！

我刚添加了一个函数来指定您想要的列数以及类名称。

/* Create a jQuery Plugin */
(function($) {
  $.fn.columnize = function(config) {
    var defaults = {
      colCount       : 3,
      wrapperElement : $('<div class="wrapper-element">'),
      transpose      : false
    };
    config = $.extend(defaults, config || {}); // Apply defaults 
    var perColumn    = Math.ceil(this.children().size() / config.colCount);
    var colWidth     = (100 / config.colCount).toFixed(3) + '%';
    var $columns     = [];
    for (var col = 0; col < config.colCount; col++) {
      $columns.push(config.wrapperElement.clone().css({
        display : 'inline-block',
        width   : colWidth
      }));
    }
    this.children().each(function(index, child) {
      $(child).appendTo($columns[
        config.transpose !== false
          ? (index % config.colCount)     // Items added Left to Right
          : Math.floor(index / perColumn) // Items added Top to Bottom
      ]);
    });
    return this.empty().append($columns);
  };
})(jQuery);

$(function() {
  // Columnize the existing list! Default is already set to 3.
  $('#dropdown-content1').columnize({
    wrapperElement : $('<div>').addClass('ColWrapper') // Override default wrapper.
  });
});

.ColWrapper {
  outline: 1px #DDD solid;
  vertical-align: top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropdown-content1">
  <div class="CatsColumn">1</div>
  <div class="CatsColumn">2</div>
  <div class="CatsColumn">3</div>
  <div class="CatsColumn">4</div>
  <div class="CatsColumn">5</div>
  <div class="CatsColumn">6</div>
  <div class="CatsColumn">7</div>
  <div class="CatsColumn">8</div>
  <div class="CatsColumn">9</div>
  <div class="CatsColumn">10</div>
  <div class="CatsColumn">11</div>
  <div class="CatsColumn">12</div>
  <div class="CatsColumn">13</div>
  <div class="CatsColumn">14</div>
  <div class="CatsColumn">15</div>
  <div class="CatsColumn">16</div>
  <div class="CatsColumn">17</div>
  <div class="CatsColumn">18</div>
  <div class="CatsColumn">19</div>
</div>

如果您想简化此操作，也可以使用$.fn.wrapAll。这减轻了使用buidling数组。

var childSelector = '.CatsColumn';

for (var col = 0; col < config.colCount; col++) {
  var startIndex = (col * (perColumn - 1)) + col;
  var endIndex   = startIndex + perColumn;

  $(childSelector).slice(startIndex, endIndex).wrapAll(config.wrapperElement.clone().css({
    display : 'inline-block',
    width   : colWidth
  }));
}

jquery将div包装到列

3 个答案: