jquery - 如何将 CSS 应用于 a 的第一次迭代但不是随后的迭代？

Question

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

例子：

<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 样式应用于第一个元素。