Looping inside a while loop mysqli_fetch_array()

问题

I have the below working code to fetch images from database mysqli_fetch_array() and load the images into layout grid structure in Jquery Mobile 1.2.0.

The layout grid structure of Jquery Mobile uses built-in styled grid/blocks limited to five columns, ui-block-a up to ui-block-e. Hence, I am ought to stick to JQM styles.

NOTE: I am using four columns structure, ui-block-a to ui-block-d

In order to load eight (8) images into the blocks and have them styled correctly, I have to use these classes ui-block-a, -b, -c, -d for the first row of four images and the same classes for the second row of four images.

I used foreach (array(a, b, c, d, a, b, c, d) as $i) inside the while loop but I got duplicated results.

The code is working fine, but I was wondering if there are other possibilities to achieve the desired structure by removing all IF-statements.

The code:

while ($row = mysqli_fetch_array($query)) {
 $img = $row["fn"];
  if (empty($img)) { break; }
  $thumb = 'images/th_'.$img;
  if ($count == 8) { break; } // limited to 8 images/results

  if ($count == 0) $i = 'a'; //first 4 imgs row classes
  if ($count == 1) $i = 'b';
  if ($count == 2) $i = 'c';
  if ($count == 3) $i = 'd';

  if ($count == 4) $i = 'a'; //second 4 imgs row classes
  if ($count == 5) $i = 'b';
  if ($count == 6) $i = 'c';
  if ($count == 7) $i = 'd';

  $ths.='<div class="ui-block-'.$i.'"><img src="'.$thumb.'"></div>';

  $count = $count + 1;
};

The result:

<div class="ui-grid-c">
    <!-- First row -->
    <div class="ui-block-a"><img src="img1.jpg"></div>
    <div class="ui-block-b"><img src="img2.jpg"></div>
    <div class="ui-block-c"><img src="img3.jpg"></div>
    <div class="ui-block-d"><img src="img4.jpg"></div>
    <!-- Second row -->
    <div class="ui-block-a"><img src="img5.jpg"></div>
    <div class="ui-block-b"><img src="img6.jpg"></div>
    <div class="ui-block-c"><img src="img7.jpg"></div>
    <div class="ui-block-d"><img src="img8.jpg"></div>
</div>

Thank you in advance!

回答1:

let's give it a try!

$count=0;
$arr=array('a', 'b', 'c', 'd');
while ($row = mysqli_fetch_array($query)) {
 $img = $row["fn"];
  if (empty($img)) { break; }
  $thumb = 'images/th_'.$img;
  if ($count == 8) { break; }

  $i=$arr[$count%4];    

  $ths.='<div class="ui-block-'.$i.'"><img src="'.$thumb.'"></div>';

  $count++;
};

回答2:

Try

$count = 0;
while ($row = mysqli_fetch_array($query) && $count < 8) {
  $img = $row["fn"];
  if (empty($img)) { break; }
  $thumb = 'images/th_'.$img;

  $i = chr(97 + ($count%4) ); // char a + 0, 1, 2 or 3

  $ths.='<div class="ui-block-'.$i.'"><img src="'.$thumb.'"></div>';

  $count++;
};

php function chr: http://php.net/manual/en/function.chr.php

ascii code for "a": 97

回答3:

Like the other answers this uses MOD to determine what column we are in, but will work for any number of pics and also fill in blank cells should num of pic not be a factor of 4. Used a user input instead of a d/b result for the demo see http://solomon.ie/so/gallery.php?pics=6 - change pics=6 to whatever number

<?  
$num_pics = 0;
$num_pics = $_GET['pics'];


// store HTML/JQM fragments
$blank_picture_row = "<div class='ui-block-a'>%pic_1%</div>\n";
$blank_picture_row .= "<div class='ui-block-b'>%pic_2%</div>\n";
$blank_picture_row .= "<div class='ui-block-c'>%pic_3%</div>\n";
$blank_picture_row .= "<div class='ui-block-d'>%pic_4%</div>\n\n";

//start HTML
$out ="<div class='ui-grid-c'>\n\n";



for ($pic_index=0; $pic_index < $num_pics; $pic_index++)
    {
    $thumb_pic = "Pic # $pic_index";// create image tag - text for demo

    if ($pic_index % 4 == 0) // mod result will be zero for start of each new row of 4 
        $picture_row = $blank_picture_row;

    $position_in_row = ($pic_index % 4) + 1;
    $pic_place_holder = "%pic_"  . $position_in_row . "%";

    $picture_row = str_replace($pic_place_holder, $thumb_pic, $picture_row);

    if ($pic_index == ($num_pics - 1)) // last pic, blank any positions that are not needed
        {
        $position_in_row = $pic_index % 4; 

        switch ($position_in_row) 
            { 
            case 0: // last pic was in column 1 - using a space, but could also put in a dummy pic
                    $picture_row = str_replace("%pic_2%", "&nbsp;", $picture_row);
            case 1: // last pic was in column 2 
                    $picture_row = str_replace("%pic_3%", "&nbsp;", $picture_row);
            case 2: // last pic was in column 3 
                    $picture_row = str_replace("%pic_4%", "&nbsp;", $picture_row);
            case 3: // last pic is in column 4, no action required
                break;
            } 
        } // END if if ($pic_index == ($num_pics - 1))




    if ($pic_index % 4 == 3 || $pic_index == ($num_pics - 1))  
        {// last pic in this row or last pic in total - add this row to output
        $out .= $picture_row;
        }

    } // END for ($pic_index=$start_pic; $pic_index < $finish_pic; $pic_index++)


$out .= "</div>\n\n\n";
$out=htmlspecialchars($out);
$out=nl2br($out);

print "$out\n";
?>

来源：https://stackoverflow.com/questions/15005298/looping-inside-a-while-loop-mysqli-fetch-array

标签

php

jquery-mobile

while-loop