for循环并将结果集添加到div

我想在for循环中将每3条记录附加到一个div。 numberList是动态的，所以我们不确定确切的长度。要求是选择3个记录并将其包装在div中。例如，如果numberList.length是7，那么我们应该有3个div。前2格将包含3条记录，最后一格将有一条记录。for循环并将结果集添加到div

如何去做这件事？

for (var j = 0; j < numberList.length; j++) { 
number = numberList[j].Number; 
}

每3次记录后，取结果，并在一个DIV

来源

2013-05-08 Kalish

那么你是如何获得在这种情况下号码列表？你有没有尝试过任何东西？如果是，请不要犹豫，在这里发布？ – 2013-05-08 08:14:22

尝试这样：

var numberList = [ 123, 234, 345, 456, 567, 678, 789 ]; // sample data 

var frag = document.createDocumentFragment(), 
    div; 

for (var j = 0; j < numberList.length; j++) { 
    if (!(j % 3)) { 
     div = document.createElement('div'); 
     frag.appendChild(div); 
    } 
    div.appendChild(document.createTextNode(' ' + numberList[j])); 
} 

document.body.appendChild(frag);

这里举例：http://jsfiddle.net/vtQtr/

这其中大部分应该是相当熟悉;如果您不熟悉它，您可能需要阅读remainder operator%（有时称为“mod”或“modulo”）。

我们还使用文档片段来避免重复修改文档。首先，我们将东西插入到片段中，然后将整个片段一次插入到文档中。

在这个例子中，我用一个空格分隔了每个div中的数字，但是您可以调整它以使用任何您喜欢的东西。

来源

2013-05-08 08:19:37

感谢您的输入！它有很大帮助！ :) – Kalish 2013-05-08 09:13:13

@Kalish，没问题，很高兴它有帮助。 :) – 2013-05-08 09:14:35

你需要的东西这个追加？

for (var j = 0; j < numberList.length; j++) { 
    if ((j+1)%3) { 
    // create new div 
    } else { 
    // add record to the div 
    } 
}

来源

2013-05-08 08:16:41 turbod

<html> 
<head> 
<title>test</title> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    var arr = ["one", "two", "three", "four", "five", "six", "seven"]; 
    var j = 0; 
    var str = ""; 
    var master = $("#masterDiv"); 
    for (i = 0; i < arr.length; i++) { 
     str += arr[i]; 
     j++; 
     if (j >= 3) { 
      master.append($('<div/>', { html: str })); 
      str = ""; 
      j = 0; 
     } 
    } 
    master.append($('<div/>', { html: str })); 

}); 
</script> 
</head> 
<body> 
<div id="masterDiv"></div> 
</body> 
</html>

来源

2013-05-08 08:26:08

这个问题并不真正相关，但我不认为这是有效的XHTML（'

for循环并将结果集添加到div

回答

相关问题