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

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 等)
• 关键字 - 偶数或奇数
• 一个表达式 - 形式为 an+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然后你只注意到任何正整数都可以写成 5 * k + r其中 r是 0, 1, 2, 3, 4 之一(这就是 division of integer numbers 的工作原理)。正好有 5除以 5 的连续整数产生相同的整数结果(和不同的余数)；
• 鉴于 PHP 部门总是产生实数，因此需要将结果转换为 int(通过 type casting the result to (int) )；
• + 1 “推”一个需要偏移量 A在第一个 2 B 之前秒。 0和 1除以 0 时产生相同的结果 ( 2 ) (他们是第一组)，2和 3生产 1并制作第二组等等。

泛化

如果需要制作N不同类型的 block ( A ， B ， C ， D a.s.o.)，它们中的每一个都出现 M连续多次( A A A B B B C C C D D D ... , M 在这里是 3 )则公式为:

(int)(($i + $k) / M) % N

此公式产生的值是 0 之一, 1 ... N - 1它会告诉您使用什么符号( A ， B a.s.o.)。没有+ $k此公式生成 M A 的实例其次是 M B 的实例, M C 的实例依此类推，直到最后一个符号。它打印出 M * N符号总数然后它从A开始.

$k 的值是 0 .. M * N - 1 之一它允许序列从序列内的任何点开始。它表示从序列开头跳过的符号数。