我有一个产品页面,我希望每行显示3个项目,然后如果它有更多,请创建一个新行并显示更多。因此每行3个cols,行数不受限制。下面是我的代码,其中包含我的循环,我假设代码需要进入。
$(data).find('products').each(function() {
itemName = $(this).find('itemName').text();
itemDesc = $(this).find('itemDesc').text();
itemID = $(this).find('id').text();
items +='<div class="row-fluid">\
<div class="span3">Col 1</div>\
<div class="span3">Col 2</div>\
<div class="span3">Col 3</div>\
</div>';
count++;
});
这是我需要做的地方,但我对如何处理这个问题有点困惑。如果计数可以被3分割,我认为它将需要创建一个新行。
感谢您提供的任何帮助或输入。
答案 0 :(得分:6)
首先,不需要自己处理count
变量,.each()
函数已经提供index element(作为可选参数)。
使用modulus
运算符,您可以将index
除以3得到余数。然后,您可以知道何时需要打印行的开头和结尾。
$(data).find('products').each(function(index) {
itemName = $(this).find('itemName').text();
itemDesc = $(this).find('itemDesc').text();
itemID = $(this).find('id').text();
if ((index % 3) == 0) items += '<div class="row-fluid">';
items += '<div class="span3">Col 1</div>';
if ((index % 3) == 2) items += '</div>';
});
if (items.substr(-12) != '</div></div>') items += '</div>';
答案 1 :(得分:3)
离开场地,不要!改用CSS。
将span3
类设置为具有30%的with,并显示内联块。这样,当您决定每行显示2,4或60时,您只需要更改CSS。这也可以让您通过针对不同视口的CSS媒体查询来更改每行的项目数,例如移动。
更进一步,你不需要担心当你的物品返回时关闭行不能被3整除
在旁注中,如果您决定使用CSS路线,请考虑使用<ul>
和<li>
代替,因为语义上您有一个列表。
更新小提琴已更新,以演示li
的使用以及此方法的灵活性。
答案 2 :(得分:0)
你应该使用模数:http://msdn.microsoft.com/en-us/library/ie/9f59bza0(v=vs.94).aspx 它可以让你从两个数字中得到一个余数,这样你就可以用(在你的.each中)这样的东西来做这个:
if(!($(this).index() % 2)){
// Add your row
}
$(this).index()返回.each()的索引,%2返回该索引的剩余部分除以2,因此前3次运行它就像这样:
希望这就是你的意思。
答案 3 :(得分:0)
以下是我认为更清洁的方法:
// Map each product to a cell.
var cells = $(data).find('products').map(function() {
var itemName = $(this).find('itemName').text();
var itemDesc = $(this).find('itemDesc').text();
var itemID = $(this).find('id').text();
return $('<div></div>').addClass('span3').text(itemName+' '+itemDesc+' '+itemID);
});
// Collect the cells into rows.
var rows = [];
for (var i=0, j=cells.length; i<j; i+=3) {
rows.push(
$('<div></div>')
.addClass('row-fluid')
.append(cells.slice(i,i+3))
);
}
答案 4 :(得分:0)
解决您问题的最佳方法是使用jquery模板。您可以通过ajax请求以Json格式获取数据,并通过jquery模板动态创建行:
<script src="jquery.tmpl.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var data = [
{ name: "Astor", product: "astor", stocklevel: "10", price: 2.99},
{ name: "Daffodil", product: "daffodil", stocklevel: "12", price: 1.99},
{ name: "Rose", product: "rose", stocklevel: "2", price: 4.99},
{ name: "Peony", product: "peony", stocklevel: "0", price: 1.50},
{ name: "Primula", product: "primula", stocklevel: "1", price: 3.12},
{ name: "Snowdrop", product: "snowdrop", stocklevel: "15", price: 0.99},
];
$('#flowerTmpl').tmpl(data).appendTo('#row1');
});
</script>
<script id="flowerTmpl" type="text/x-jquery-tmpl">
<div class="dcell">
<img src="${product}.png"/>
<label for="${product}">${name}:</label>
<input name="${product}" data-price="${price}" data-stock="${stocklevel}"
value="0" required />
</div>
</script>
HTML:
<div id="row1" class="drow"></div>
答案 5 :(得分:0)
var $products = $(data).find('products');
var num_of_rows = Math.ceil($products.length/3)
//Create your rows here each row should have an id = "row" + it's index
$products.each(function(i,val){
var row_index = Math.ceil(i/3)
$('#row' + row_index).append("<div>Col"+i%3+"</div>")
});
这样的事情应该有效