Forums/How Do I ... ?

Alternate Styling for Lists.

Vicknesh Ramachandran
posted this on August 7, 2013, 12:41

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
 

Comments

User photo
Michael Slater
Webvanta

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

August 8, 2013, 17:01
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")

August 9, 2013, 11:41