如何使用PHP和CSS nth-child生成ABBAABBA ...序列 [英] How to generate ABBAABBA... sequence with PHP and CSS nth-child

问题描述

我有两列布局，其中元素的配置如下:

I have a two column layout with this disposition of elements:

A B
B A
A B
B A
…

A B
B A
A B
B A
…

A 和 B 元素的内容来自不同的来源和样式.因此，我试图找到一个表达式来在PHP和CSS nth-child中生成此 A B B A A B B A…序列.

A and B elements have content from different origins and also different styles. So, I'm trying to find an expression to generate this A B B A A B B A … sequence both in PHP and CSS nth-child.

这就是我要生成的布局:

This is what I'm doing to generate the layout:

/* $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替换为:

I know once I got the correct PHP sequence I could replace my CSS with:

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

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

But I'd like to know if this could be also done with nth-child...

我想这并不难，但是我对此感到有些困惑...任何提示或帮助都将不胜感激！

I guess it can't be that hard, but I'm kinda stuck with this... Any hint or help will be much appreciated!

编辑:@axiac的回答和一些

After @axiac's answer and some research, I've learned that nth-child only allows:

• 一个数字-任何正整数(1、2、3、20等)
• 关键字-偶数或奇数
• 表达式-形式为an + b(a，b为整数)

所以，我想我想用CSS的 nth-child 做不到的事情.谢谢你们！

So, I guess what I want can't be done with CSS's nth-child. Thank you guys!

推荐答案

您需要的PHP代码是:

The PHP code you need is:

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

更新

应OP的要求，这就是我产生上面代码的方式.理想的结果是:

At OP's request, this is how I produced the code above. The desired outcome is:

A B B A A B B A ..

• 在初始 A 之后，每个符号重复两次.我们使用 for(;;)循环从 0 迭代到大于零的某些 $ n ；
• 交替是通过模运算(％2 )提供的；
• 将值分组可通过查找连续数字的公共属性来完成.这样的性质就是除以期望的组大小的整数结果.如果您需要输出5个 A 和5个 B ，那么您会注意到任何正整数都可以写为 5 * k + r ，其中 r 是 0、1、2、3、4 之一(这就是 A ，需要使用 +1 偏移量.如果将 0 和 1 除以 2 (它们组成第一组)，则会产生相同的结果( 0 )， 2 和 3 产生 1 并组成第二组，依此类推.
• after the initial A each symbol repeats twice. We use a for (;;) loop to iterate from 0 to some $n greater than zero;
• the alternation is provided by the modulo operation (% 2);
• grouping the values can be done by finding a common property for consecutive numbers. The integer result of division by the desired group size is such a property. If you need to output 5 As followed by 5 Bs then you just notice that any positive integer number can be written as 5 * k + r where r is one of 0, 1, 2, 3, 4 (this is how the division of integer numbers works). There are exactly 5 consecutive integer numbers that divided by 5 produce the same integer result (and different remainders);
• given that the PHP division always produce real numbers, the conversion of the result to int (by type casting the result to (int)) is needed;
• the + 1 offset is needed to "push" one A before the first 2 Bs. 0 and 1 produce the same result (0) when divided by 2 (they make the first group), 2 and 3 produce 1 and make the second group and so on.

如果您需要产生 N 种不同类型的块( A ， B ， C ， D aso)，它们每个都连续出现 M 次( AAABBBCCCDDD ... ， M 为 3 )，则公式为:

If you need to produce N different types of blocks (A, B, C, D a.s.o.), each of them appear M consecutive times (A A A B B B C C C D D D ..., M is 3 here) then the formula is:

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

此公式产生的值是 0 ， 1 ... N-1 之一，它告诉您使用什么符号( A ， B aso).如果没有 + $ k ，此公式将生成 A 的 M 个实例，然后生成 B 的 M 个实例code>， C 的 M 个实例，依此类推，直到最后一个符号为止.它总共打印 M * N 个符号，然后从 A 重新开始.

The value produced by this formula is one of 0, 1 ... N - 1 and it tells what symbol to use (A, B a.s.o.). Without + $k this formula generates M instances of A followed by M instances of B, M instances of C and so on until the last symbol. It prints M * N symbols in total then it starts over with A.

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

The value of $k is one of 0 .. M * N - 1 and it allows the sequence to start from any point inside the sequence. It represents the number of symbols to skip from the start of the sequence.

这篇关于如何使用PHP和CSS nth-child生成ABBAABBA ...序列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！