Question

我目前正在为我工作的公司开发模块商店，但有一点问题。从表中提取记录时，我希望每三个数据记录关闭HTML＆＃34; UL＆＃34;标签。

这就是我目前所拥有的：

<?php
  $selektKat = "SELECT * FROM `proizvodi` WHERE `kategorija` = '$kat'"; //don't worry about SQLi; I will fix it
  $result = mysqli_query($con, $selektKat) or die(mysqli_error());

// Line where the loop starts
<?php
while ($row = mysqli_fetch_array($result)) { ?>

  <ul class="products-grid clearfix" style="margin-right: 5px; margin-left: 20px;">
  <li class="item" style="min-height: 339px">
    <a id="product-image-42321" href="proizvod.php" title="naziv" class="product-image">
      <img src="http://static.511tactical.com/mag/media/catalog/product/cache/1/small_image/220x/9df78eab33525d08d6e5fb8d27136e95/5/3/53212_716_Alternate1.jpg" width="220" alt="<?php echo $row['naziv'] ?>" />
    </a>
      <ul class="swatches clearfix">
      <li id="swatch-228" class="swatch product-42321">
        <a href="proizvod.php" title="<?php echo $row['naziv']; ?>">
        <img src="<?php echo __DIR__ . '/images/' . $row['slika'] . '.jpg'; ?>" />
        </a>
      </li>
      </ul>

      <div class="price-box">
        <span class="label" id="configurable-price-from-42321">
          <span class="configurable-price-from-label">
          </span>
        </span>


      <div class="product-name"><a id="product-name-140981" href="proizvod.php"><?php echo $row['naziv']; ?></a></div>

      <span class="regular-price" id="product-price-42321">
        <span class="price"><?php echo $row['cijena']; ?><sup>KM</sup>
        </span>
      </span>
      </div>

      <div class="actions">
      </div>

  </li>

<?php
}
?>
</ul> // This has to be closed in loop after every 3 records
</div>

照片： enter image description here

干杯。

Answer 1

首先，我提供简单的PHP脚本，可以根据您的需要添加。在此脚本中，可以正确处理open和end标记。

我还添加了$break_after变量 - 你可以在这里设置你想要的任何正值 - 在你的情况下它是3，因为你想在每个第3个元素之后进行操作。

第一种方法（假设您可以在循环之前获得数据元素数量）

<?php
$data = array(1,2,3,4,5);

$break_after = 3;

$counter = 0;   
$totalNumber = count($data);                    
foreach ($data as $item) {
    if ($counter % $break_after == 0) {
        echo '<ul>';
    }
    echo '<li>'.$item.'</li>';    

    if ($counter % $break_after == ($break_after-1) || $counter == $totalNumber-1) {
        echo '</ul>';
    }
    ++$counter;

}

第二种方法（假设您在循环之前无法获取数据元素数量）

<?php
$data = array(1,2,3,4,5);

$break_after = 3;

$counter = 0;               
foreach ($data as $item) {
    if ($counter % $break_after == 0) {
        echo '<ul>';
    }
    echo '<li>'.$item.'</li>';    

    if ($counter % $break_after == ($break_after-1)) {
        echo '</ul>';
    }
    ++$counter;

}

if ((($counter-1) % $break_after) != ($break_after-1)) {
    echo '</ul>';

}

关于你的问题，你还需要记住开始你的<ul>每个第3条记录（不仅仅是关闭它），还要确保在循环后关闭它。在您的情况下，您可以使用第二种方法，因为您不知道元素的数量（实际上您可以使用mysqli_num_rows函数获取它们，然后您也可以使用方法1）。对于您的情况，您的代码应该如下所示：

<?php
  $selektKat = "SELECT * FROM `proizvodi` WHERE `kategorija` = '$kat'"; //don't worry about SQLi; I will fix it
  $result = mysqli_query($con, $selektKat) or die(mysqli_error());

// Line where the loop starts
<?php
$counter = 0;   

$break_after = 3;

while ($row = mysqli_fetch_array($result)) { 
  if ($counter % $break_after == 0) {
   ?>
  <ul class="products-grid clearfix" style="margin-right: 5px; margin-left: 20px;">
  <?php } ?>
  <li class="item" style="min-height: 339px">
    <a id="product-image-42321" href="proizvod.php" title="naziv" class="product-image">
      <img src="http://static.511tactical.com/mag/media/catalog/product/cache/1/small_image/220x/9df78eab33525d08d6e5fb8d27136e95/5/3/53212_716_Alternate1.jpg" width="220" alt="<?php echo $row['naziv'] ?>" />
    </a>
      <ul class="swatches clearfix">
      <li id="swatch-228" class="swatch product-42321">
        <a href="proizvod.php" title="<?php echo $row['naziv']; ?>">
        <img src="<?php echo __DIR__ . '/images/' . $row['slika'] . '.jpg'; ?>" />
        </a>
      </li>
      </ul>

      <div class="price-box">
        <span class="label" id="configurable-price-from-42321">
          <span class="configurable-price-from-label">
          </span>
        </span>


      <div class="product-name"><a id="product-name-140981" href="proizvod.php"><?php echo $row['naziv']; ?></a></div>

      <span class="regular-price" id="product-price-42321">
        <span class="price"><?php echo $row['cijena']; ?><sup>KM</sup>
        </span>
      </span>
      </div>

      <div class="actions">
      </div>

  </li>

<?php
    if ($counter % $break_after == ($break_after - 1)) {
        echo '</ul>';
    }
    ++$counter;

}

if (($counter-1) % $break_after != ($break_after - 1)) { // make sure there will be closing </ul>
    echo '</ul>';

}
?>
</div>

Answer 2

<?php
//Our images
$array = array(1,2,3,4,5,6,7,8,9,10,11,12,13,14);
//Count array for last ul
$count_array = count($array);
//Counter
$count       = 0;
foreach ($array as $key => $value) {
    $count++;
    //Begin
    if ($count % 3 == 1) {
        echo '<ul>';
    }
    //Output data
    echo '<li>' . $value . '</li>';
    //Close ul
    if ($count % 3 == 0 || $count_array == $count) {
        echo '</ul>';
    }
}
?>

输出：

<ul><li>1</li><li>2</li><li>3</li></ul><ul><li>4</li><li>5</li><li>6</li></ul><ul><li>7</li><li>8</li><li>9</li></ul><ul><li>10</li><li>11</li><li>12</li></ul><ul><li>13</li><li>14</li></ul>

1
2
3

4
6

7
8
9

10
11
12

13
14

Answer 3

您特别要求打开和关闭<ul>标签，但我是否可以建议另一种方法，仅使用css，可以轻松转换为响应式解决方案？

首先，只需将您的商品放入div而不是列表项（完全省略<ul>）：

<div class="product-grid">
    <?php while ( $row = mysqli_fetch_array( $result ) ): ?>
        <div class="item"> ... </div>
    <?php endwhile; ?>
</div>

现在只需使用普通的旧css浮动网格并在列之间添加边距。然后使用nth-of-type伪选择器，我们可以清除nth元素上的边距，具体取决于您想要连续多少项。

Always-3-column-grid示例（Fiddle）

.product-grid { width: 100%; }
.product-grid .item { float: left; width: 32%; margin-left: 2%; margin-bottom: 2%; }
.product-grid .item:nth-of-type(3n+1) { margin-left: 0; }

现在这些物品很好地放在一个网格中，根本不管容器的宽度是多少。

小提示：overflow: hidden是一种显示边框的clearfix。没有它也可以。

现在，如果您想要，例如，添加断点以在较小的设备上显示2列网格而不是3列网格，只需更改项目的宽度和伪选择器的计数器。我也将3网格计数器放入媒体查询中，因此您不必覆盖该网格。

3到2列网格示例（Fiddle）

请勿忘记调整示例面板的大小以查看响应结果;）

.product-grid { width: 100%; }
.product-grid .item { float: left; width: 32%; margin-left: 2%; margin-bottom: 2%; }

/* 3-column */
@media (min-width: 501px) {
    .product-grid .item:nth-of-type(3n+1) { margin-left: 0; }
}

/* 2-column. Don't forget to alter the item width accordingly */
@media (max-width: 500px) {
    .product-grid .item { width: 49%; }
    .product-grid .item:nth-of-type(2n+1) { margin-left: 0; }
}

你走了！您完全响应的3到2列网格:)只需根据您的需要更改断点，以及宽度和边距大小（只是为了确保在3列版本中3*columnWidth + 2*marginWidth加起来达到100％，和2*columnWidth + marginWidth为2列版本。）

Answer 4

$i=0;
while ($row = mysqli_fetch_array($result)) { 

// Your code

if($i % 5 == 0){ // Break </ul> tag here}

// Rest of code


$i++;
} // End while loop

%是modulus，它会在分割完成后返回余数，所以

5 % 5 = 0 9 % 5 = 4

Answer 5

添加varaible，让您在每次迭代时增加$i。当它是 3的的倍数时，只需关闭ul。

while ($row = mysqli_fetch_array($result)) {

    // YOUR CODE HERE

    $count++;
    if ($count % 3 == 0) echo '</ul>';
}

为了记录，%运算符将为您提供欧几里德分部的剩余部分。

在＆＃39; n＆＃39;之后打破UL标签在while循环中的时间

5 个答案: