VisualForce - 条件付きHTMLタグ

Question

リストの最初の要素に異なるスタイルを適用しようとしています。

私は現在class場合にのみ、cnt==0とliを適用するためにカウンタを使用しようとしていますが、私はOutputTextタグに<>括弧を含めることはできません。角かっこをエスケープするか、条件を使用して<li>タグにclassを挿入する方法はありますか？

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> 

Answer 1

Visualforceは厳密で、すべての要素には開始タグと終了タグが必要です。また、自己閉じでなければなりません。コンパイルされたとき、それが唯一のクロージング「LI」タグではなく、条件付き開口部「LI」タグを見るように、Visualforceのは文句を言うでしょう、1つの解決策は、次のようにクラス名に変数を作ることです。

<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

<apex:dataList>とお考えですか？私はそれがあなたがやろうとしていることを達成するかもしれないと思います。

Answer 3

あなたが考えることがあります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>