Question

我有一个<cfloop>输出查询到jQuery可排序列表。所有可排序标记（<h3>, <div>等）都包含在循环中。我需要使用CSS将第一个<h3>元素锚定到页面上的设置区域。但我不想在第一次迭代后应用这个CSS。

<cfloop query="createAgendaTopics">
    <h3 style="color:#FFFFFF; font-weight:bold;">
       <cfoutput>#One.categoryName#</cfoutput>
    </h3>
    <div>
         <cfoutput>#One.subCategoryGUID#</cfoutput>
    </div>        
 </cfloop>

Answer 1

输出/循环查询时，它具有内置的currentRow属性QueryName.CurrentRow

我把它放到cfoutput中以简化代码。

<cfoutput query="createAgendaTopics">
    <cfif createAgendaTopics.CurrentRow EQ 1>
        <h3 style="color:##FFFFFF; font-weight:bold;">#One.categoryName#</h3>
    <cfelse>
        <div>#One.subCategoryGUID#</div>         
    </cfif>
</cfoutput>

Answer 2

这样的事情：

<cfloop query=createAgendaTopics">
    <cfif currentrow is 1>
       code for first row
    <cfelse>
      code for remaining rows
    </cfif>
</cfloop>

Answer 3

听起来你可以简单地使用:first-child CSS pseudo-class。

示例：

<style type="text/css">
   .agendaTopics :first-child {
       /* css to "anchor the first element to a set area on the page" */
   }
</style>

<div class="agendaTopics">
  <cfloop query="createAgendaTopics">
     <h3 style="color:#FFFFFF; font-weight:bold;">
       <cfoutput>#One.categoryName#</cfoutput>
     </h3>
     <div>
       <cfoutput>#One.subCategoryGUID#</cfoutput>
     </div>         
   </cfloop>
 </div>

虽然我不确定你的意思

我需要使用第一个元素锚定到页面上的设置区域 CSS。

您应该能够使用上面的代码将您想要的任何CSS样式应用于第一个元素。

如何将CSS应用于<cfloop>的第一次迭代但不应用于后续迭代？</cfloop>

3 个答案: