Fatal编程技术网
  • css/
  • Css 如何简化这个div循环

Css 如何简化这个div循环

css

Css 如何简化这个div循环,css,Css,如何简化像这样的div设计？Angular/Jquery解决方案很好。这是一个位于电影顶部的div过滤器。此外，这应该简化还是保持原样 <div id="filter"> <div id="row1"> <div class="filblack"></div> <div class="filgrey"></div>

如何简化像这样的div设计？Angular/Jquery解决方案很好。这是一个位于电影顶部的div过滤器。此外，这应该简化还是保持原样

        <div id="filter">
            <div id="row1">
                <div class="filblack"></div>
                <div class="filgrey"></div>
                <div class="filblack"></div>
                <div class="filgrey"></div>
                <div class="filblack"></div>
                <div class="filgrey"></div>
                <div class="filblack"></div>
                <div class="filgrey"></div>
                <div class="filblack"></div>
            </div>
            <div id="row2">
                <div class="filgrey"></div>
                <div class="filblack"></div>
                <div class="filgrey"></div>
                <div class="filblack"></div>
                <div class="filgrey"></div>
                <div class="filblack"></div>
                <div class="filgrey"></div>
                <div class="filblack"></div>
                <div class="filgrey"></div>
            </div>
            <div id="row3">
                <div class="filblack"></div>
                <div class="filgrey"></div>
                <div class="filblack"></div>
                <div class="filgrey"></div>
                <div class="filblack"></div>
                <div class="filgrey"></div>
                <div class="filblack"></div>
                <div class="filgrey"></div>
                <div class="filblack"></div>
            </div>
            <div id="row4">
                <div class="filgrey"></div>
                <div class="filblack"></div>
                <div class="filgrey"></div>
                <div class="filblack"></div>
                <div class="filgrey"></div>
                <div class="filblack"></div>
                <div class="filgrey"></div>
                <div class="filblack"></div>
                <div class="filgrey"></div>
            </div>
            <div id="row5">
                <div class="filblack"></div>
                <div class="filgrey"></div>
                <div class="filblack"></div>
                <div class="filgrey"></div>
                <div class="filblack"></div>
                <div class="filgrey"></div>
                <div class="filblack"></div>
                <div class="filgrey"></div>
                <div class="filblack"></div>
            </div>
        </div>
可以使用角度重复指令

    <div id="filter">
        <div id="row{{index}}" ng-repeat="index in [1, 2, 3, 4, 5]">
            <div class="filblack"></div>
            <div class="filgrey"></div>
            <div class="filblack"></div>
            <div class="filgrey"></div>
            <div class="filblack"></div>
            <div class="filgrey"></div>
            <div class="filblack"></div>
            <div class="filgrey"></div>
            <div class="filblack"></div>
        </div>
    </div>
如果你能像那样将索引变量模板化到ID中，我不是很肯定，但是那些ID是重要的吗？此外，您可能还可以创建指令来进一步减少灰色/黑色重复。类似于偶数/奇数类型的东西。

您可以使用角度重复指令

    <div id="filter">
        <div id="row{{index}}" ng-repeat="index in [1, 2, 3, 4, 5]">
            <div class="filblack"></div>
            <div class="filgrey"></div>
            <div class="filblack"></div>
            <div class="filgrey"></div>
            <div class="filblack"></div>
            <div class="filgrey"></div>
            <div class="filblack"></div>
            <div class="filgrey"></div>
            <div class="filblack"></div>
        </div>
    </div>
如果你能像那样将索引变量模板化到ID中，我不是很肯定，但是那些ID是重要的吗？此外，您可能还可以创建指令来进一步减少灰色/黑色重复。像是偶数/奇数之类的东西。

你说的div循环是什么意思？我不确定我是否理解正确，但您希望减少标记，对吗

您可以先删除内部div上的类名，改为：n个奇数和：n个偶数

这可能是您的新标记：

<div id="filter">
    <div id="row1">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="row2">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="row3">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="row4">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="row5">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
你说的div循环是什么意思？我不确定我是否理解正确，但您希望减少标记，对吗

您可以先删除内部div上的类名，改为：n个奇数和：n个偶数

这可能是您的新标记：

<div id="filter">
    <div id="row1">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="row2">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="row3">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="row4">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="row5">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
您可以使用以下类似的方法：

.row {
    background-image: repeating-linear-gradient(
      90deg,
      rgba(24,24,24,.6),
      rgba(24,24,24,.6) 15%,
      rgba(10,10,10,.6) 15%,
      rgba(10,10,10,.6) 30%
    );
}
并将html简化为行元素：

滤器{ 位置：绝对位置； 排名：0； 左：0； 宽度：100%； 高度：100vh } .行{ 身高：20%； 宽度：100%； 背景图像：重复线性梯度90度，rgba24,24,24,6，rgba24,24,24,6 15%，rgba10,10,10,6 15%，rgba10,10,10,6 30%； } 第n个孩子{ 背景图像：重复线性梯度90度，rgba10,10,10,6，rgba10,10,10,6 15%，rgba24,24,24,6 15%，rgba24,24,24,24,24,6 30%； } 您可以使用以下类似的方法：

.row {
    background-image: repeating-linear-gradient(
      90deg,
      rgba(24,24,24,.6),
      rgba(24,24,24,.6) 15%,
      rgba(10,10,10,.6) 15%,
      rgba(10,10,10,.6) 30%
    );
}
并将html简化为行元素：

滤器{ 位置：绝对位置； 排名：0； 左：0； 宽度：100%； 高度：100vh } .行{ 身高：20%； 宽度：100%； 背景图像：重复线性梯度90度，rgba24,24,24,6，rgba24,24,24,6 15%，rgba10,10,10,6 15%，rgba10,10,10,6 30%； } 第n个孩子{ 背景图像：重复线性梯度90度，rgba10,10,10,6，rgba10,10,10,6 15%，rgba24,24,24,6 15%，rgba24,24,24,24,24,6 30%； }
这个角度的方法如何？可能需要围绕黑/灰顺序进行调整

<div id="filter">
  <div id="row{{x}}" ng-repeat="x in range(1,5)">
    <div class='fill{{(x+y) % 2 == 0 ? "black" : "gray"}}' ng-repeat="y in range(1,9)"></div>
  </div>
</div>
这个角度的方法如何？可能需要围绕黑/灰顺序进行调整

<div id="filter">
  <div id="row{{x}}" ng-repeat="x in range(1,5)">
    <div class='fill{{(x+y) % 2 == 0 ? "black" : "gray"}}' ng-repeat="y in range(1,9)"></div>
  </div>
</div>
Html:

<div id="filter"></div>
Jquery：

var blackSquare = '<div class="filblack"></div>'
var whiteSquare = '<div class="filgrey"></div>'

for(k=0; k<8; k++)
{
    $('#filter').append('<div id="row'+k+'">');

    for(j=0;j<8; j++)
    {                
       if( ((j+k) % 2) == 0)
       {
           $('#row'+k).append(blackSquare);
       }
       else
       {
           $('#row'+k).append(whiteSquare);
       }
    }   

   $('#filter').append(' </div>');
}
Html:

<div id="filter"></div>
Jquery：

var blackSquare = '<div class="filblack"></div>'
var whiteSquare = '<div class="filgrey"></div>'

for(k=0; k<8; k++)
{
    $('#filter').append('<div id="row'+k+'">');

    for(j=0;j<8; j++)
    {                
       if( ((j+k) % 2) == 0)
       {
           $('#row'+k).append(blackSquare);
       }
       else
       {
           $('#row'+k).append(whiteSquare);
       }
    }   

   $('#filter').append(' </div>');
}
看一看有图案的线性渐变：看一看有图案的线性渐变：在查看CSS之后，您肯定应该去掉ID并用单个类替换它们。在查看CSS之后，你肯定应该去掉ID，用一个类来替换它们。指定背景大小和位置可以让你只需要一行div就可以重复多次。Yep@David我正在研究一个解决方案，只需CSS过滤器ID：指定背景大小和位置可以让你重复多次只使用一行div.Yep@David进行必要的次数。我正在研究一个解决方案，只使用CSS过滤器ID：