2

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

現在、カウンタを使用して を適用しようとしてliいclassますが、タグに括弧をcnt==0含めることはできません。ブラケットをエスケープする方法や、条件を使用してタグに挿入する方法はありますか?< >OutputTextclass<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」タグは表示されないため、問題が発生します。解決策の 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>
于 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 に答える