Question

我正在尝试将不同的样式应用于列表中的第一个元素。

我目前正在尝试使用计数器仅在li时使用class应用cnt==0，但我不能在<中包含> OutputText个括号class标记。有没有办法逃避括号或使用条件将<li>插入<apex:variable var="cnt" value="{!0}" /> <apex:repeat value="{!items}" var="item" >  <apex:OutputText value="<li class="activeLI">" rendered="{!cnt==0}" /> <apex:OutputText value="<li>" rendered="{!cnt!=0}" /> <img src="{!$Resource[item.Image__c]}" width="85" height="90"/> </li> <apex:variable var="cnt" value="{!cnt+1}"/> </apex:repeat>标记？

我知道这可以在使用JavaScript之后完成，但我宁愿避免使用它。

{{1}}

Answer 1

Visualforce是严格的，每个元素都必须有一个开始和结束标记，或者必须是自动关闭的。编译时，Visualforce会抱怨它只会看到结束“li”标签而不是条件打开“li”标签，一种解决方案是使类名变量如下：

<apex:variable var="cnt" value="{!0}" />
<apex:variable var="class" value=""/>
<apex:repeat value="{!items}" var="item" >
  <apex:variable var="class" value="activeLI" rendered="{!cnt==0}"/>
  <apex:variable var="class" value="" rendered="{!cnt!=0}"/>
    <li class="{!class}">
      ...
    </li>
  <apex:variable var="cnt" value="{!cnt+1}"/> 
</apex:repeat>

Answer 2

您是否考虑过使用CSS选择器？这是一个关于如何设置列表的第一个元素样式的示例。

<style>
ul.myList > li:first-child {color : red}
</style>

<ul class="myList">
  <li>this is red</li>
  <li>this has default formatting</li>
</ul>

Answer 3

您是否考虑过使用<apex:dataList>？我认为它可能会实现您的目标。

VisualForce - 条件html标签

3 个答案: