3

これはばかばかしいほど単純かもしれませんが、順序付けられていないリストにクラスを追加する方法を見つけようとしています.3番目の項目ごとにそのクラスを交互に使用します..

私は3番目のアイテムごとにクラスを追加することしかできませんでした（これは私が望むものではありません）が、ここに私のコードがあります：

<?php $i=1; foreach($this->items as $item) : ?>
      <li class="<?php if ($i % 3 == 0) : ?>odd<?php endif; ?>"><a href="<?php echo $linky; ?>">xxx</a></li>
<?php $i++; endforeach; ?>

吐き出す：

<li class="">xxx</li>
<li class="">xxx</li>
<li class="odd">xxx</li>
<li class="">xxx</li>
<li class="">xxx</li>
<li class="odd">xxx</li>

しかし、私が望んでいるのは次のとおりです。

<li class="odd">xxx</li>
<li class="odd">xxx</li>
<li class="odd">xxx</li>
<li class="even">xxx</li>
<li class="even">xxx</li>
<li class="even">xxx</li>

など..通常、私はjqueryを使用してこのようなことを行いますが、この場合はphpを使用する必要があります..どんな助けでも大歓迎です:)

4

6 に答える 6

6

毎回反転 (否定) されるブール値フラグを使用します$i % 3 == 0。

// Start with 0 instead of 1
$i=0;
// Flag starts TRUE
$state = TRUE;
foreach ($this->items as $item) {
  if ($i % 3 === 0) {
    // Flip to opposite state
    $state = !$state;
  }
  ?>
  <li class="<?php if ($state) : ?>odd<?php else: ?>even<?php endif; ?>"><a href="<?php echo $linky; ?>">xxx</a></li> 
  <?php
  $i++;
}

ここにデモンストレーションがあります。ただし、クラスの変更を確認するには、出力を調べる必要があります。

于 2012-06-29T00:39:52.757 に答える
2

7番目のアイテムを「奇数」にしたいと思いますか？JavaScript を書きましたが、簡単に PHP に変換する必要があります

デモ 

for (var i = 0; ​i < 15; i++) {
    if(i%6 < 3) {
document.write("odd<br>");
    }
    else {
document.write("even<br>")     
    }        
}​

コードを次のように変更します。

<?php $i=0; foreach($this->items as $item) : ?>
      <li class="<?php if ($i % 6 < 3) : ?>odd<?php else: ?>even<?php endif; ?>"><a href="<?php echo $linky; ?>">xxx</a></li>
<?php $i++; endforeach; ?>
于 2012-06-29T00:42:23.167 に答える
2

間違った演算子を使用しています。

if ($i % 3 == 0)

「$i を 3 で割った余りが 0 の場合」を意味します。

あなたが欲しいのは

if (floor($i/3) == 0).

試してみて、様子を見てください。

編集:「else」コードも欠落しているようです。それがない場合、「奇数」以外のクラスに対して「偶数」とは書き込まれません。

EDIT EDIT: パターンを続けたい場合は、次を使用します。

if ((floor($i/3) % 2) == 0).
于 2012-06-29T00:39:51.457 に答える
1

これを行う別の方法は、奇数と偶数の子をターゲットにできる新しいCSS3セレクターを使用することです。

これが例のリンクです。基本的に、あなたは通常通りあなたのリストを持っているでしょう。

<ul>
<li></li>
<li></li>
</ul>

次に、奇数および偶数と呼ばれるクラスをさまざまなスタイルで使用するのではなく、次のような新しいセレクターを使用できます...

li:nth-child(even) { background: #fff; }
li:nth-child(odd) { background:#000; }

これにより、すべての偶数リストアイテムの背景が#fffになり、すべての奇数リストアイテムの背景が＃000になります。

編集：他のいくつかのCSS3セレクターを使用して、1番目の子と2番目の子を使用する最初の2つの後の偶数とオッズのみをターゲットにすることができます。

于 2012-06-29T01:30:15.160 に答える
0

ループの 3 回の反復ごとにのみ出力する理由は、モジュラス演算子を使用して"%"i が 3 で割り切れるかどうかをテストしているためです($i % 3 == 0)。これにより、$i が 3 で割り切れる場合にのみ出力されます。

問題を解決するには:

<?php
$odd = "<li class='odd'>";
$even = "<li class='even'>";
$i = 0;

foreach($this->items as $item)
{
  if($i < 3)
    echo $odd . $item . "</li>";
  else if($i >= 3)
    echo $even . $item . "</li>";
  $i++;
  if($i > 5)
    $i = 0;
}
?>

$i は 0 から始まるため、最初の 3 つの項目には 0 - 2 のインデックスが付けられ、後続の 3 つの項目には 3 - 5 のインデックスが付けられることに注意してください。

于 2012-06-29T00:44:46.823 に答える
0

for ループ内に for each ループをネストしてみてください。外側のループは反復する回数を示し、内側のループは奇数と偶数を何回繰り返すかを示します。

于 2012-06-29T00:40:08.413 に答える