2

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

我目前正在尝试使用计数器来应用liwith a class，cnt==0但我不能在标签中包含< >括号。OutputText有什么方法可以转义括号或使用条件将其class插入标签中？<li>

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

<apex:variable var="cnt" value="{!0}" /> 
<apex:repeat value="{!items}" var="item" >
    <!-- only render the class if it is the first element -->
    <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>
4

3 回答 3

4

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>
于 2012-04-29T16:16:59.020 回答
1

您是否考虑过使用 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>
于 2012-05-02T16:36:47.927 回答
0

你考虑过使用<apex:dataList>吗？我认为它可能会完成您想要做的事情。

于 2012-04-29T15:42:06.297 回答