appcropolois
  •  Templates
  • Builder
    •  Product Tour
    •  Sign up
    •  Dashboard
  •  Learn
  •  Discover
  •  Upgrade
  •  Sign in
  •  My Profile
    • View Orders
    • Edit Profile
    • Sign Out
  •  Cart
    ➜ 
  1. Home
  2. Learn
  3. Arranging items left and ...
Share

Arranging items left and right within a foreach loop

If you need to arrange items left and while performing a {foreach...} loop, you can determine the module of the index property of each item during the iteration.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{foreach $pages.data as $page}
    <div class="{if $page@index%2 == 1}right{else}left{/if}">
        {$page.post_title}
    </div>
{/foreach}
 
{*
index 0%2 = 0
index 1%2 = 1
index 2%2 = 0
index 3%2 = 1
index 4%2 = 0
index 5%2 = 1
*}
{foreach $pages.data as $page}
    <div class="{if $page@index%2 == 1}right{else}left{/if}">
        {$page.post_title}
    </div>
{/foreach}

{*
index 0%2 = 0
index 1%2 = 1
index 2%2 = 0
index 3%2 = 1
index 4%2 = 0
index 5%2 = 1
*}

By: Raul Sanchez
Category: Frameworks
Posted on: Sunday, May 10, 2015

Sign in to post your comment


Not registered? Create an Account.

Lost your password? Click here to recover.

Building Apps?

Create, customize, and publish mobile web applications using the Appcropolis Mobile Builder.

Get Started
Browse Categories
  • Books (0)
  • CSS3 (2)
  • Design (0)
  • Frameworks (10)
  • How-To (6)
  • HTML5 (2)
  • jQuery Mobile (7)
  • Miscelaneous (1862)
  • Mobile Builder (1)
  • News (9)
  • Opinion (1)
  • User Experience (0)
  • Web Technology (11)
  • Webclips (4)

Ready-to-use Templates

Check out Appcropolis Mobile Templates

We offer 1,000's of mobile templates that are fully designed, coded, and ready to use. Learn more.

Download Free Templates

Contact Us

Your feedback means the world to us.
Contact us if you have any questions or
any feature requests:

Saint Louis, MO 63101
911 Washington Ave
Email: info@appcropolis.com

Appcropolis

  •   About Us
  •   Blog
  •   Discover
  •   Templates
  •   Contact Us

Get Free Templates

Subscribe to our newsletter to receive
notification about new templates, prodcut updates,
and technical articles.


© 2025 Appcropolis, LLC · All Rights Reserved
Sitemap  ·  Terms Of Service  ·  Privacy