2017-09-21 18 views
0

私はアイテムの配列を持っていてループしたいのですが、divの内部でグループ化する代わりに、それらをcssクラスでグループ化したいと思います。ループごとに3をグループ化する

モバイルビューで4つ以上の行があり、ブレークcssクラスが画面サイズの変更に応じて変更されるか、ブレークを一括して削除し、グリッド。

私は3つのアイテムごとにブレークを作成できますが、クラスはimに苦労して割り当てます。

ご協力いただければ幸いです。

以下のレイアウトをPHP foreachループで作成したいと思います。

ex。

<div class="listing"> 
    <div class="group_1">item1</div> 
    <div class="group_1">item2</div> 
    <div class="group_1">item3</div> 

    <div class="break_1"></div> 

    <div class="group_2">item4</div> 
    <div class="group_2">item5</div> 
    <div class="group_2">item6</div> 

    <div class="break_2"></div> 

    <div class="group_3">item7</div> 
    <div class="group_3">item8</div> 
    <div class="group_3">item9</div> 

    <div class="break_3"></div> 

    <div class="group_4">item10</div> 
    <div class="group_4">item11</div> 
    <div class="group_4">item12</div> 

    <div class="break_4"></div> 
</div> 
+0

本当の質問は何ですか? CSSについては、異なるクラスグループの定義されていない数ですか? – desoss

+1

あなたはこれまでに何を試しましたか?私たちにあなたのPHPコードを教えてください –

+0

Iveはループのロードを試みましたが、何も動作しません。いくつかのコードを追加していくつかの問題を解決します。 –

答えて

2

私たちのように項目の配列を持っている場合:

$items = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8']; 
$result = ''; 
for($i = 0 ; $i < count($items) ; $i++) { 
    $result .= '<div class="' 
     . 'group_' 
     . intval(floor($i/3) + 1) 
     . '">' 
     . $items[$i] 
     . '</div>'; 
} 
echo $result; 

と、これはサンプル出力

enter image description here

+0

エラーを修正しましたインデックスについて忘れました。コードを修正しました 今すぐ試してください –

+0

ありがとう、これは完璧です。まさに私が心に持っていたこと、私はすでにあなたがした調整をしました。私はあなたのコードを見たら、それはすべて私に来た。最近私は思っていました。答えは分で受け入れます。 –

+0

確かに仲間、ありがとう@JohanPretorius 結果のスクリーンショットを追加しました とコードは今100%働いています –

2

ない、それはあなたがとにかく、探しているものであれば非常に確かです、次のような基本配列が与えられます:

$arr=array(1,2,3,4,5,6,7,8,9,10,11,12);

あなたがループにそれをすることができますし、この方法を期待するコードがあります。

$group_num=1; 
echo "<div class='listing'>"; 
foreach ($arr as $key=>$item) { 

    echo "<div class='group_$group_num'>$item</div>"; 
    if ($key%3==0) { 
     echo "<div class='break'></div>"; 
     $group_num++; 
    } 
} 
echo "</div>"; 

結果:私はジャコモPittalisとハッサン・アリ・サレムの助けに

<div class='listing'> 
<div class='group_1'>1</div> 
<div class='group_1'>2</div> 
<div class='group_1'>3</div> 

<div class='break'></div> 

<div class='group_2'>4</div>  
<div class='group_2'>5</div>  
<div class='group_2'>6</div> 

<div class='break'></div> 

<div class='group_3'>7</div> 
<div class='group_3'>8</div> 
<div class='group_3'>9</div> 

<div class='break'></div> 

<div class='group_4'>10</div> 
<div class='group_4'>11</div> 
<div class='group_4'>12</div> 

<div class='break'></div> 

+0

ありがとう、これも私が探していたものです。これは、私が探していたものにちょっと近づいているので、正しい答えとしてこれを受け入れることができます。 –

0

感謝をこれをちょっとした方法で解決することができました。

<?php 
    $items = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9', 'item10']; 
    $i = 0; 
    $len = count($items); 
    foreach ($items as $item) { 
     $mod = intval(floor($i/3) + 1); 

     echo '<div class="' . 'group_' . $mod . '">' . $items[$i] . '</div>'; 

     if (($i % 3 == 2)) { ?> 
      <div class="content_holder hidden" id="group_<?php echo $mod; ?>"></div> 
     <?php } 

     if ($i == $len - 1) { ?> 
      <div class="content_holder hidden" id="group_<?php echo $mod; ?>"></div> 
     <?php } 
     $i++; 
    } 
?> 
関連する問題