Question

我有一系列公司：

var list = ["company1", "company2", "company3", "company4", "company5", "company6"];

我想循环遍历数组，并以三人一组的形式将公司列表附加到dom。像这样：

<div class="row">
    <div class="col col-4">Company 1</div>
    <div class="col col-4">Company 2</div>
    <div class="col col-4">Company 3</div>
</div>
<div class="row">
    <div class="col col-4">Company 4</div>
    <div class="col col-4">Company 5</div>
    <div class="col col-4">Company 6</div>
</div>
<div class="row">
    <div class="col col-4">Company 7</div>
    <div class="col col-4">Company 8</div>
    <div class="col col-4">Company 9</div>
</div>

^所以这将是理想的标记 - 在数组循环后生成。理想情况下，我想创建一个空标记模板 - 然后从该模板中读取，然后在js中创建标记

我的代码：

＆＃13;

var list = ["company1", "company2", "company3", "company4", "company5", "company6"];

var itemWrapper = $('.wrapper');
var itemRow = itemWrapper.find('.row');
var itemCol = itemRow.find('.col').eq(0);

console.log("itemRow", itemRow);
console.log("itemCol", itemCol);

itemWrapper.empty();
$.each(list, function(index, value) {
  console.log("index", index);
  console.log("value", value);
  
  if (index % 3 == 0) {
  	console.log("-------new row");
  	$('.wrapper').append('<div class="row">');
  }
  
  $('.wrapper').append(itemCol.html(value));
  
  if (index % 3 == 0) {
  	//$('.wrapper').append('</div>');
  	console.log("-------end row");
  }
  
});

/*
if (index % 3 == 0) {
  console.log("new row");
  modalWindow.partyContainer.append('<div class="row party-list">');
}
console.log("modalWindow.itemRow", modalWindow.itemRow);
var itemCol = $(modalWindow.itemRow).html(value.name);
modalWindow.partyContainer.append(itemCol);
if (index + 3 % 3 == 0) {
  console.log("end row");
  modalWindow.partyContainer.append('</div>');
}
if (index == 12) {
  return false;
}
*/

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <div class="row">
        <div class="col col-4">x</div>
        <div class="col col-4">c</div>
        <div class="col col-4">v</div>
    </div>
</div>

＆＃13;

Answer 1

如果余数为0，只需使用jQuery追加一个新行并相应地添加<div>。

var list = ["company1", "company2", "company3", "company4", "company5", "company6"];

var itemWrapper = $('.wrapper');
itemWrapper.empty();

list.forEach(function(row, idx) {
	if(!(idx % 3)) {
  	itemWrapper.append('<div class="row"></div');
  }
  var itemRow = $('.wrapper .row:last-child');
  itemRow.append('<div class="col col-4">'+row+'</div>');
});

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>

<div class="wrapper">

</div>

如果您有任何疑问，请与我们联系。希望这会有所帮助。

Answer 2

只需使用将保存当前行元素的变量$row。使用新的row元素为每个三个元素更新该变量。对于每个元素，只需附加到$row：

var list = ["company1", "company2", "company3", "company4", "company5", "company6", "company7"];

var $wrapper = $('.wrapper');
$wrapper.empty();

var $row;                                                      // the current row of elements
$.each(list, function(index, value) {
  if(index % 3 == 0) {                                         // for every three elements
    $row = $('<div class="row"></div>').appendTo($wrapper);    // create a new row element and assign it to $row
  }
    
  $row.append('<div class="col col-4">' + value + '</div>');   // add the current element to the current row
});

.row { margin: 10px 0; background: #eee; }

.row > * { display: inline-block; margin: 0 10px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper"></div>

Answer 3

您可以使用array.slice为您分割数组，并在我的示例中迭代块。

您是否有特殊原因希望将现有HTML用作模板？

＆＃13;

var list = ["company1", "company2", "company3", "company4", "company5", "company6", "company7", "company8", "company9", "company10"];

var itemWrapper = $('.wrapper');

var listChunks = [];
var chunkSize = 3;
for (var i = 0; i < list.length; i += chunkSize) {
    listChunks.push(list.slice(i,i+chunkSize));
}

itemWrapper.empty();
var rowHtmlOpen = '<div class="row">';
var rowHtmlClose = '</div>';
listChunks.forEach(function (chunk) {
    var rowHtml = rowHtmlOpen;
    chunk.forEach(function (col) {
        rowHtml += '<div class="col col-4">' + col + '</div>'
    });
    rowHtml += rowHtmlClose;
    itemWrapper.append(rowHtml);
});

＆＃13;

.row { margin: 10px 0; background: #ffe; }
.row > * { display: inline-block; margin: 0 10px; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper"></div>

＆＃13;

Answer 4

id = models.AutoField(primary_key = True)
name = models.CharField(max_length = 60)
category = models.ForeignKey(Categories, on_delete = models.CASCADE)

Answer 5

这是一个只使用javascript的版本。逻辑获取列并将其从DOM中删除，以便可以在不影响DOM的情况下更改其文本。然后它构建一个带有html的字符串，取代包装器的内容。在最后，它用整个结果替换包装器的内容。构建html而不是元素会消除一些开销，并且在最后更改包装器限制了DOM更改的次数，这两者都是性能提升。

编辑：做了一个小修改。我添加了一个额外的公司名称，因此数组不能被3整除，然后我修改了结束逻辑以添加if元素是最后一个，无论如何，所以html总是正确关闭。

var list = ["company1", "company2", "company3",
            "company4", "company5", "company6",
            "company7"];

var itemWrapper = document.querySelector('.wrapper');
var itemColumn = itemWrapper.querySelector('.col');
var output = '';

itemColumn.parentNode.removeChild(itemColumn);

list.forEach(function(company, index){
  if (index % 3 === 0) output += '<div class="row">';
  
  itemColumn.innerText = company;
  output += itemColumn.outerHTML;
  
  if (++index % 3 === 0 || index === list.length) output += '</div>';
});

itemWrapper.innerHTML = output;

<div class="wrapper">
    <div class="row">
        <div class="col col-4">x</div>
        <div class="col col-4">c</div>
        <div class="col col-4">v</div>
    </div>
</div>

循环遍历数组并使用模数 - jquery对项进行分组

5 个答案: