Deniz B.
Deniz B.

Reputation: 2562

Add HTML Class after 3 elements in PHP

My HTML should seen like this;

<div class="row">
    <div class="col-xs-6">
        <ul class="list-unstyled">
            <li><i class="fa fa-check-circle"></i> Car</li>
            <li><i class="fa fa-check-circle"></i> Google</li>
            <li><i class="fa fa-check-circle"></i> Building</li>
        </ul>
    </div>
    <div class="col-xs-6">
        <ul class="list-unstyled">
            <li><i class="fa fa-check-circle"></i> Bathroom</li>
            <li><i class="fa fa-check-circle"></i> Facebook</li>
            <li><i class="fa fa-check-circle"></i> Twitter</li>
        </ul>
    </div>
</div>

In database, all data is in same field with there is a comma between them(e.g. Car,Google,Building,Bathroom, Facebook, Twitter).

So, I'm using this code to seperate them;

<?php echo str_replace(',', '</li><li><i class="fa fa-check-circle"></i>', $data); ?>

I need to get the same result with HTML, how can I do this?

Thanks in advance.

Upvotes: 2

Views: 871

Answers (3)

andrew
andrew

Reputation: 2098

$arrData = explode(",", $data); // comma separated list of words
$i = 0; // temp counter

echo '<div class="row">';
foreach ($arrData as $word)
{
    if ($i==0) { echo '<div class="col-xs-6"><ul class="list-unstyled">'; } // open first html containers

    echo  '<li><i class="fa fa-check-circle"></i>'.$word.'</li>'; // create li

    $i++; // increase counter

    if ($i==2) // this is the 3rd element in loop
    {
        echo '</ul></div>'; // close html containers
        $i=0; // reset counter, so proccess repeats
    }
}
echo '</div>';

This code will do what you need, as long as you always have 6 words in your array (or 9, 12, 15, etc).

Upvotes: 1

Amrita Gupta
Amrita Gupta

Reputation: 37

<?php
 $v1=explode(",",$data);
 $data0=$v1[0];
 $data1=$v1[1];
 $data2=$v1[2];
 $data3=$v1[3];
 $data4=$v1[4];
 $data5=$v1[5]; 
?>
<div class="row">
    <div class="col-xs-6">
        <ul class="list-unstyled">
            <li><i class="fa fa-check-circle"></i> <?php echo $data0; ?></li>
            <li><i class="fa fa-check-circle"></i>  <?php echo $data1; ?></li>
            <li><i class="fa fa-check-circle"></i>  <?php echo $data2; ?></li>
        </ul>
    </div>
    <div class="col-xs-6">
        <ul class="list-unstyled">
            <li><i class="fa fa-check-circle"></i>  <?php echo $data3; ?></li>
            <li><i class="fa fa-check-circle"></i>  <?php echo $data4; ?></li>
            <li><i class="fa fa-check-circle"></i>  <?php echo $data5; ?></li>
        </ul>
    </div>
</div>

Upvotes: 1

Sjoerd de Wit
Sjoerd de Wit

Reputation: 2413

You need to explode and loop through it... look at this and it should help you understand

$pieces = explode(",", $data);
foreach($pieces as $value){
     echo  '<li><i class="fa fa-check-circle"></i>'.$value.'</li>';
}

Upvotes: 0

Related Questions