Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

Easy control to detect every nth list item in Silverstripe


Go to End


3181 Views

Avatar
octopuscreative

Community Member, 10 Posts

3 February 2012 at 10:58pm

Thought I'd post this in case it's of use to anyone looking the apply custom styles to certain list elements.

I had a gallery page with images contained in a ul list with 10px padding on the right and bottom edges. I needed to apply a CSS style on every 5th image (at the right edge of the page) with no padding on the right edge, so it fits the page width structure.

I've used the following jQuery script on sites I've built outside of the Silverstripe framework and it works well, however I was struggling to get this to work correctly with the SS framework.

<script>
jQuery(document).ready(function() {
jQuery(".examples li:nth-child(3n)").addClass("nopadding");
});
</script>

There are some $this->iteratorPos % 3 commands outlined on the forums for applying custom styles but this was by far the simplest method in 2.4… MultipleOf() : http://doc.silverstripe.org/templates

<ul>
<% if MultipleOf(4) %>
<li class="fourth">Your content here</li>
<% else %>
<li>Your content here</li>
<% end_if %>
</ul>

Thanks to Socks for his post here:

http://www.silverstripe.org/template-questions/show/5357?start=16#post297212