Create a loop that gets pages with their template

Question

I am trying to make a template that will be an html5/ vertical scrolling base.

I have created an amount of page templates that each would represent a <section> on index.php which mainly all it does is to retrieve the child pages of a page I named ROOT using this:

// Set up the objects needed 
$my_wp_query = new WP_Query(); 
$all_wp_pages = $my_wp_query->query(array('post_type' => 'page'));

// Get the page as an Object 
$mainpage =  get_page_by_title('ROOT');

// Filter through all pages and find Portfolio's children 
$children = get_page_children( $mainpage->ID, $all_wp_pages );

Is there a way to render the output with the each page template? The page hierarchy is like this:

ROOT
- Page1 (template: foo1)
- Page2 (template: foo2)
- Page3 (template: foo3)
- Page4 (template: foo1)

so what I am trying to achieve is to have an output like this:

<section class='page<?php the_ID(); ?>'>
[content with template foo1]
</section>
<section class='page<?php the_ID(); ?>'>
[content with template foo2]
</section>
<section class='page<?php the_ID(); ?>'>
[content with template foo3]
</section>
<section class='page<?php the_ID(); ?>'>
[content with template foo1]
</section>

Answer 1

The snippet from codex is a bit redundant in your case. You can achieve what you need, by using snippets like these:

index.php

$mainpage = get_page_by_title( 'ROOT' );
$the_query = new WP_Query( array(
    'post_parent' => $mainpage->ID,
    'post_type'   => 'page',
) );

$index = 0;
while ( $the_query->have_posts() ) :
    $the_query->the_post();
    echo '<section class="page' . get_the_ID() . '">';
    get_template_part( 'foo', $index++ % 3 + 1 );
    echo '</section>';
endwhile;

wp_reset_postdata();

foo1.php

<div id="template-foo-1">
    <?php the_content() ?>
</div>

foo2.php

<div id="template-foo-2">
    <?php the_content() ?>
</div>

foo3.php

<div id="template-foo-3">
    <?php the_content() ?>
</div>