Question

尝试使用jQuery创建具有属性对象的新元素，如下所示：

var i, j, columns=3, arr=[], numbers=[1,2,3,4,5,6,7,8,9,10,11,12];
for (i = 0; i < columns; i++) {
arr.push($('<div></div>', {
    append: function() {
        var elem ='';
        for (j = 0; j < numbers.length; j += columns) {
            elem += $('<div></div>', {
                 append: function() {
                    return numbers[j + i];
                   }
                 });
        }
        return elem;
    }
 }));
}

如何实现此输出：

<div>
  <div>1</div><div>4</div><div>7</div>
</div>
<div>
  <div>2</div><div>5</div><div>8</div>
</div>
<div>
  <div>3</div><div>6</div><div>9</div>
</div>

提前感谢您的帮助

Answer 1

解决方案是首先将数组项分组为多维数组，如下所示。

[[1,4,7],[2,5,8],[3,6,9]]

然后，您可以遍历此多维数组并生成HTML。为了生成HTML，诀窍是使用HTML String数组创建每个组的地图，然后使用join组合所有项目。

＆＃13;

var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var result = []
numbers.forEach(function(element, index) {
  var group = index % 3;
  var temp = result[group];
  if (!Array.isArray(temp)) {
    temp = [];
  }
  temp.push(element);
  result[group] = temp;
});

var divs = result.map(function(group) {
  var groupHTML = ['<div>'];
  groupHTML = groupHTML.concat(group.map(function(item) {
    return '<div>' + item + '</div>'
  }))
  groupHTML.push('</div>');
  return groupHTML.join('');
});

console.log(divs.join(''))

＆＃13;

Answer 2

作为替代解决方案，不使用数组：

numbers=[1,2,3,4,5,6,7,8,9,10,11,12]; // can be anything,strings too...html portions...
cols=3;
rows=3; // or limit rows by Math.ceil(numbers.length/cols)
every=3; // every Nth element
html_string='';
for(j=0;j<rows;j++) {

html_string+='<div>\n';

for(i=0;i<cols;i++) {
k=(i*every)+j;

if(numbers[k]) { // check if we are out of array
html_string+='<div>';
html_string+=numbers[k];
html_string+='</div>';
}

}
html_string+='\n</div>\n';

}

console.log(html_string);

演示：

＆＃13;

numbers=[1,2,3,4,5,6,7,8,9,10,11,12];
cols=3;
rows=3; // or limit rows by Math.ceil(numbers.length/cols)
every=3; // every Nth element
html_string='';
for(j=0;j<rows;j++) {

html_string+='<div>\n';

for(i=0;i<cols;i++) {
k=(i*every)+j;

if(numbers[k]) { // check if we are out of array
html_string+='<div>';
html_string+=numbers[k];
html_string+='</div>';
}

}
html_string+='\n</div>\n';

}

console.log(html_string);

＆＃13;

然后，只需将其附加到页面上的某个位置。

使用jQuery和for循环JavaScript创建html元素

2 个答案: