Question

我有两个列布局，包含元素的配置：

A B
  B A
  A B
  B A
  ...

A和B元素包含来自不同来源和不同风格的内容。所以，我试图在PHP和CSS nth-child中找到一个表达式来生成这个A B B A A B B A …序列。

这就是我正在做的生成布局：

/* $post_ids is an Array of ID's */

$count = count( $post_ids );

for ( $i = 0; $i < $count; $i++ ) {
    $classes = ['teaser', 'lg-6', 'md-6', 'sm-12'];
    if ( ( 2 * $i ) % 2 == 0 ) { // This is wrong. Always true!
        $classes[] = 'a-element';
    } else {
        $classes[] = 'b-element';
    }
    insert_post( $post_ids[ $i ], $classes ); // This is a custom function
}

这是我的CSS：

.teaser:nth-child(2n) { // Also wrong
    /* Styles for A items */
}

我知道一旦我得到了正确的PHP序列，我可以用以下代码替换我的CSS：

.a-element {…}
.b-element {…}

但我想知道是否也可以使用nth-child ...

我想它可能会那么难，但我有点坚持这个......任何提示或帮助都会非常感激！

编辑：@ axiac的答案和一些research之后，我了解到nth-child只允许：

一个数字 - 任何正整数（1,2,3,20等）
关键字 - 偶数或奇数
表达式 - 以+ b（a，b为整数）的形式

所以，我猜我想要的东西不能用CSS nth-child来完成。谢谢你们！

Answer 1

您需要的PHP代码是：

if ((int)(($i + 1) / 2) % 2 == 0 ) {
    $classes[] = 'a-element';
} else {
    $classes[] = 'b-element';
}

<强>更新

根据OP的要求，这是我制作上述代码的方式。期望的结果是：

A B B A A B B A ..

在每个符号的初始A重复两次之后。我们使用for (;;)循环从0迭代到大于零的某个$n;
交替由模运算（% 2）;
可以通过查找连续数字的公共属性来对值进行分组。除以期望的组大小的整数结果是这样的属性。如果您需要输出5 A s后跟5 B s，那么您只需注意任何正整数都可以写为5 * k + r，其中r是0, 1, 2, 3, 4之一1}}（这就是division of integer numbers的工作原理）。有5个连续整数除以5产生相同的整数结果（以及不同的余数）;
鉴于PHP除法总是产生实数，需要将结果转换为int（由type casting the result to (int)）;
需要+ 1偏移才能在前2 A之前“推”一个B。 0和1除以0（它们构成第一组），2和2产生相同的结果（3） 1并制作第二组，依此类推。

概括

如果您需要生成N种不同类型的区块（A，B，C，D aso），则每个区块都显示为{{ 1}}连续时间（M，A A A B B B C C C D D D ...此处为M），则公式为：

此公式生成的值是(int)(($i + $k) / M) % N，0 ... 1之一，它告诉您要使用的符号（N - 1，A ASO）。如果没有B，则此公式会生成+ $k个M个A个M个B个M C个M * N个实例直到最后一个符号。它总共打印A个符号，然后以$k重新开始。

0 .. M * N - 1的值是options: { draggable: false, icon:'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png' }之一，它允许序列从序列内的任何点开始。它表示从序列开始跳过的符号数。

Answer 2

如果我理解正确，问题在于：

(2 * $i) % 2 == 0

这将在所有迭代中返回true（2 * $ i）始终是偶数

尝试：

$i % 2 == 0

代替

如何使用PHP和CSS nth-child生成ABBAABBA ...序列

2 个答案:

概括