仿CSS的nth-child功能用PHP做一個用迴圈數帶出固定1.2.3的數值重複function-教學撰寫:徐嘉裕Neil hsu

CSS的nth-child其實是很好用的，但唯一的限制是指定的物件必須為相連，而且無法對子物件做樣式設定，例如以下結構就無法用nth-child來定義.thumbnail的樣式!

<ul class="row">
<li class="col-md-4">
<div class="thumbnail"><img>......略</div>
</li>
<li class="col-md-4">
<div class="thumbnail"><img>......略</div>
</li>
<li class="col-md-4">
<div class="thumbnail"><img>......略</div>
</li>
</ul>

物件必須相連，nth-child是用物件的順序來定義樣式的，如果要做以下的效果固定迴圈3個區塊3種樣式用nth-child是無法實現的!!

當然是還有解決方法，Xoops是使用smarty樣板引擎，在foreach裡面用<{cycle values="box01,box02,box03"}>來定義class也是可以，但如果有做了AJAX的分類切換功能，那被切換的頁面是讀ajax.php，所以smarty的cycle又不能用了，無法兼顧。

最終的解決辦法還是要靠PHP，利用迴圈吧固定1.2.3的倍數整除後回傳數值，然後再輸出到樣板或直接輸出PHP上，這樣就沒問題了!寫了一個自動分3區塊樣式的function有需要的朋友參考看看!

//PHP-CODE

function blocksclassbox($key="",$i="",$type="",$prefix=""){
$nthchilds="".$prefix."box01"; //初始值
if($key==2 or (($key+$i+2) % 3)==0) $nthchilds="".$prefix."box02"; //輸出2.5.8
if(($key%3)==0) $nthchilds="".$prefix."box03"; //輸出3的整除
return $nthchilds;
}

使用方法-在foreach迴圈中呼叫blocksclassbox()函數並帶入值參

$i=1;
foreach($Arrbox as $key=> $val){
//區塊樣式
$block[$key]['nthchilds']=blocksclassbox($key,$i,$type="",$prefix="blocks"); //輸出區塊樣式
$i++;
}

//紅字的$i值需要建立自動加總功能

這樣就可以了，吧$block[$key]['nthchilds']輸出到樣板上看看數值是否正確

測試一次開50筆資料也沒問題，都能固定抓取1.2.3的倍數整除數後回傳數值，這樣就搞定了!收工吃飯!!

教學撰寫：徐嘉裕