Question

我有一个for循环，循环遍历许多图像，并将它们显示为Web项目中用户控件的一部分。

我需要能够在div中显示两个图像，然后是1个图像，然后是两个图像等。

我有以下代码，它将两个图像放在div中，但还没有设法找出如何在1和2之间交替？

StringBuilder sb = new StringBuilder();
StringBuilder sbMain = new StringBuilder();

for (int i = 0; i < FADS.Count; i++)
{
    if(i % 2 == 0)
    sb.Append("<div class=\"featrow\">");

    FeatAdv fad = FADS[i];
    sb.AppendFormat("<a href=\"{0}\" target='BannerPage' title=\"{1}\">", params);
    sb.AppendFormat("<img src='{0}'/></a>", ImagePath.FromLocal(imagelocation));

    if (i % 2 != 0)
    {
        sb.Append("</div>");
        sbMain.Append(sb);
        sb = new StringBuilder();
    }
}

Answer 1

您可以通过更改很少的代码来实现此目的。

目前，您在每个偶数图像之前打开div

if(i % 2 == 0)
    sb.Append("<div class=\"featrow\">");

并在每个奇数图像后关闭

if (i % 2 != 0) // equivalently i % 2 == 1
{
    sb.Append("</div>");
    sbMain.Append(sb);
    sb = new StringBuilder();
}

如果您想要将图像分成三组，则可以用

替换条件

if (i % 3 == 0)

和

if (i % 3 == 2)

分别

但还希望在第三个元素之前打开div并在第二个元素之后关闭一个元素，所以你可以用

代替条件
if ((i % 3 == 0) || (i % 3 == 2))

和

if ((i % 3 == 1) || (i % 3 == 2))

分别

请注意，与原始代码一样，您需要在循环后检查，以确保您没有打开div并关闭它 - 如果您有多个图像超过三的倍数。（在原始代码中，一个多于两个的倍数。）

Answer 2

基本上你想循环遍历你一次选择3个元素的数组。我写了这个，但无法测试，因为我没有你的所有数据：

StringBuilder sb = new StringBuilder();
StringBuilder sbMain = new StringBuilder();

for (int i = 0; i < FADS.Count; i+=3)
{
    sb.Append("<div class=\"featrow\">");


    for(int j =i ; j<=i+2 ;j++){

        if(j < FADS.Count){

            if(j==i+2){
                sb.Append("</div>");
                sb.Append("<div class=\"featrow\">");
            }
            FeatAdv fad = FADS[j];
            sb.AppendFormat("<a href=\"{0}\" target='BannerPage' title=\"{1}\">", params);
            sb.AppendFormat("<img src='{0}'/></a>", ImagePath.FromLocal(imagelocation));

            if(j==i+2){
                sb.Append("</div>");
            }
        }
    }

    sbMain.Append(sb);
    sb = new StringBuilder();
}

Answer 3

这个是jQuery，但可以帮助你：

<div class="test"></div>
$(document).ready(function(){
var count=10;
    for(var i=0;i<count;i++) {
    var html='<div class="inner">';
        html +='<a href="#">Image 1</a>'
        if(i%2==0) {
           html +='<a href="#">Image 2</a>'
        }
        html +="</div>";
        $('.test').append(html);
    }

});

JSFIDDLE

用奇怪的布局在代码后面创建div？

3 个答案: