Switch inside Channel:Categories?

Question

I would like to insert a clearfix div after every third category listing. I have used this method successfully when outputting from {exp:channel:entries} tag pairs, but it appears that the {switch} variable is not available for {exp:channel:categories} tag pairs.

Is there another way to accomplish this (perhaps with CSS, jQuery, or another EE function I'm unaware of)?

{exp:channel:categories channel="Projects" style="linear" show_empty="no" dynamic="no" disable="member_data|pagination"}
<div class="column one-third">
    <div class="pic">
        <a href="{path='our-work/list'}">
        {if category_image}{exp:ce_img:single src="{category_image}" crop="yes" width="420" height="290" filter="auto_sharpen"}
        {if:else}<img src="{lv_shortcuts_project_image_none}" alt=""/>{/if}
        <div class="img_overlay"></div></a>
    </div>
    <h3><a href="{path='our-work/list'}">{category_name}</a></h3>
    <p>{category_description}</p>
</div>
{switch='||<div class="clearfix"></div>'} <!-- DOES NOT WORK -->
{/exp:channel:categories}

Thanks!

Answer 1

If you know the exact number of categories that will be displayed, you can use conditionals in combination with the {count} variable.

Answer 2

The GWcode Alternate addon will accomplish what you need.

This simple plugin for ExpressionEngine 1 and 2 lets you rotate through any number of values to create alternations, for CSS classes for example.

You can use this plugin to rotate through any number of values, similar to the switch variable in the {exp:channel:entries} tag for example.

The most straightforward use for this would be to alternate CSS classes.

Code example

<ul>
    {exp:channel:categories channel="example" style="linear"}
        {exp:gwcode_alternate count="{count}" alternate="one|two|three"}<li class="{alternate_value}">{alternate_value}: {category_name}</li>{/exp:gwcode_alternate}
    {/exp:channel:categories}
</ul>

Answer 3

I see this has already been answered, but there is a jQuery option that might be better for you. At least it won't matter how many categories there are:

$('.selector:nth-child(3n)').after($('<div />').addClass('clearfix'));

This will select every 3rd element that matches .selector and insert <div class="clearfix"></div> after it.