Alternate Styling for Lists.

Hi,

 

I'm trying to implement the following code,

<div class="list">
<div class="orders flt_Lt">
<ul>
<li class="bg"> <a href="#">Chufes</a></li>
<li class="bg"> <a href="#">Chufes</a> </li>
<li> <a href="#">Biases</a></li>
<li> <a href="#">Biases</a> </li>
<li class="bg"><a href="#">Grizzlies</a></li>
<li class="bg"> <a href="#">Grizzlies</a> </li>
<li> <a href="#">Powder Magaziens</a></li>
<li> <a href="#">Powder Magaziens</a> </li>
</ul>
<div>
</div>

 

Each of the <li> Items is a category, from the help docs, I get how to display the list of items,

 

<ul>
  <w:kb:item:each category='exp'>
    <li><w:name /></li>
  </w:kb:item:each>
</ul>

My question is how would I implement the "class='bg'" style is there some kind of counter I could access ?

Regards
Vick
Have more questions? Submit a request

2 Comments

  • 0
    Avatar
    Michael Slater

    You can access the loop counter with w:each_index and test it with w:if_each_index.

    For details and examples, see http://support.webvanta.com/cheat

  • 0
    Avatar
    Vicknesh Ramachandran

    Thanks for the input Michael, we just cleaned up the code, and implemented a small JQuery script to update the backgrounds of the items, using

          $(".orders ul li:nth-child(4n+1)").addClass("bg")
          $(".orders ul li:nth-child(4n+2)").addClass("bg")

Article is closed for comments.
Powered by Zendesk