Разрыв UL-тега после 'n' раз в while-loop

Во-первых, я предоставляю простой PHP-скрипт, который может быть добавлен к вашим потребностям. В этом скрипте корректно обрабатываются открытые и конечные теги.

Я добавил также переменную $break_after – вы можете указать здесь любое положительное значение, которое вам нужно – в вашем случае это 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> каждую третью запись (а не только закрываете ее), но также не забудьте закрыть ее после своего цикла. В вашем случае вы можете использовать второй метод, потому что не знаете количество элементов (на самом деле вы можете получить их с mysqli_num_rows функции 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> 

 <?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
• 5
• 6

• 7
• 8
• 9

• 10
• 11
• 12

• 13
• 14

Вы специально просите открыть и закрыть теги <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 элементе, в зависимости от того, сколько элементов вы хотите в строке.

Пример с тремя столбцами ( 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 для отображения границы. Он также работает без него.

Теперь, если вы хотите, например, добавить точки останова, чтобы показать сетку с двумя столбцами вместо 3-столбцовой сетки на более мелких устройствах, просто измените ширину элемента и счетчика псевдоселектора. Я также поставил счетчик 3-grid в медиа-запросе, поэтому вам не нужно его перезаписывать.

Пример 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*columnWidth + 2*marginWidth добавляется до 100 % и 2*columnWidth + marginWidth для версии с двумя столбцами).

 $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 

% – модуль , он возвращает остаток после завершения деления, поэтому

5 % 5 = 0 9 % 5 = 4

Добавьте varaible , скажем, $i в вас, пока вы увеличиваетесь на каждой итерации. И когда он кратен 3 , просто закройте свою ul .

 while ($row = mysqli_fetch_array($result)) { // YOUR CODE HERE $count++; if ($count % 3 == 0) echo '</ul>'; } 

Для записи оператор % предоставит вам остальную часть евклидова деления.