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.

General Questions /

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

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

Easy control to detect every nth list item in Silverstripe


Reply


992 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