Создание динамической сетки с использованием jQuery mobile и модуля

Question

Я пытаюсь построить динамическую сетку, используя php и jquery mobile. Я хотел бы знать, может ли кто-нибудь помочь мне использовать модуль, чтобы определить, должен ли u-блок быть a-d в зависимости от ключевого значения итерации.

<div class="ui-grid-c"> 
     @forelse($photos as $key=>$photo) 

      @if($key == 1) 
       <div class="ui-block-a">         
        <img src="{{ $photo['file'] }}" width="60" /> 
       </div> 
      @elseif($key == 2) 
       <div class="ui-block-b">         
        <img src="{{ $photo['file'] }}" width="60" /> 
       </div> 
      @elseif($key == 3) 
       <div class="ui-block-c">         
        <img src="{{ $photo['file'] }}" width="60" /> 
       </div> 
      @elseif($key == 4) 
       <div class="ui-block-d">         
        <img src="{{ $photo['file'] }}" width="60" /> 
       </div> 
      @endif 

     @empty 

      Nothing Found 

     @endforelse 
    </div> 

Я пробовал несколько различных вариаций модуля, но ничего не работало правильно. Любая помощь будет оценена по достоинству.

Answer 1

Вы должны изменить свой класс ui-grid-c для динамического использования в зависимости от количества столбцов.

• UI-сетки-а = 2 колонки
• UI-сетки-б = 3 колонки
• щ-сетки с = 4 колонки
• т.д.

для колонок ..

• UI-блок-а - это ваш первый столбец
• UI-блок-б - это ваш второй Колум
• ЭСТ.

Так что вам нужно отслеживать количество раз, добавленных вами в столбцы, а затем добавить букву алфавита.

Использование даст вам символ a, а затем просто увеличит 86 для других символов при добавлении столбцов.