Как программно отформатировать слои, созданные циклом запроса?

Question

Эта проблема похожа на создание альтернативных цветных таблиц-строк, только мы имеем дело с div и полями вместо строк таблицы и их цветов.

Следующий код создает столько слоев, сколько есть жанров, возвращаемых из запроса (если три жанра найдены, создаются три слоя); и в каждом созданном слое код создает столько слоев, что есть названия в этом жанре (например, если в жанре есть пять названий, будет три слоя «genreName», а внутри каждого из них будет пять «titleName» «слои».

<cfoutput query="MyQuery" group="genreName"> 
    <div class="Genres"> 
     #MyQuery.GenreName# 
     <cfoutput> 
      <div class="Titles"> 
      #MyQuery.TitleName# 
      <div> 
     </cfoutput> 
    </div> 
</cfoutput> 

Это также означает, что все слои в каждом классе являются клонами. Если у меня есть макет столбцов, где я не хочу назначать левое/правое поле для первого/последнего столбцов, этот формат прерывается.

Есть ли программный способ присвоения полей на основе номера слоя (по существу, номер записи), где я могу применить условное форматирование (в данном случае левое и правое поле для средних столбцов и поля слева и справа для первых/последних столбцов)?

Большое спасибо,

Answer 1

Если то, что вы на самом деле хотите сделать, имеющий фиксированную маржу между элементов, но ни один перед первой ни после последнего, вы можете использовать first-child псевдо-класс отменить общий случай:

has_margin { margin-left: 20px; } 
column_container:first-child { margin-left: 0px; } 

... 
<div class="column_container"> 
    <div class="has_margin">...</div> 
    <div class="has_margin">...</div> 
    <div class="has_margin">...</div> 
    <div class="has_margin">...</div> 
    <div class="has_margin">...</div> 
</div> 

CSS3 определяет «структурный псевдоселектор», который позволяет вам выбирать каждый an+b'th child of an element. Установка a в число клановых классов позволяет определить, что многие правила для каждого слоя.

Answer 2

Да, создать три различных класса для левого (без левого края), средний (с обоими) и вправо (без права), или как вам это нужно настроить.

Далее следите за счетчиком (либо в цикле жанра, либо в цикле заголовка в зависимости от того, на каком уровне вы выполняете свои столбцы), и используйте оператор модуля для назначения правильного класса.

<cfset titleCount = 1> <!--- reset your title count ---> 
<cfoutput> 
    <cfswitch expression="#titleCount MOD 3#"> 
     <cfcase value="1"><cfset titleClass = "titleleft"></cfcase> 
     <cfcase value="2"><cfset titleClass = "titlemiddle"></cfcase> 
     <cfcase value="3"><cfset titleClass = "titleright"></cfcase> 
     <cfdefaultcase><cfset titleClass = ""><!--- should never get here ---></cfdefaultcase> 
    </cfswitch> 
    <div class="#titleClass#"> 
     #MyQuery.TitleName# 
    <div> 
    <cfset titleCount = titleCount + 1> 
</cfoutput> 

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