Create dynamic pages in order

.nextAll() and .last()

by Omar X

HTML

<div data-role="page" id="home">
    <div data-role="content"> <a href="#" data-role="button" id="btn">Create page</a>

        <p>Create several pages and then swipe right/left to navigate</p>
        <p class="count"></p>
    </div>
</div>

JavaScript

var i = 0;
$('#btn').on('click', function () {
    i++;
    var page = '<div data-role="page" data-add-back-btn="true" id=Gallery' + i +
        ' class="gallery-page"> ' +
        ' <div data-role="header"><h1>Gallery' + i + '</h1></div> ' + ' <div data-role="content"></div> ' +
        ' </div> ';
    if ($.mobile.activePage.next('[data-role=page]').length === 0) {
        $.mobile.activePage.after(page);
    } else {
        $.mobile.activePage.nextAll('[data-role=page]').last().after(page);
    }
    $('.count').html('pages created: ' + i);
});
$(document).on('swipeleft swiperight', '[data-role=page]', function (e) {
    if (e.type == 'swipeleft') {
        $.mobile.changePage($.mobile.activePage.next('[data-role=page]'), {
            transition: 'flip'
        });
    }
    if (e.type == 'swiperight') {
        $.mobile.changePage($.mobile.activePage.prev('[data-role=page]'), {
            transition: 'flip',
            reverse: true
        });
    }
});
$(document).on('pageshow', '.gallery-page', function () {
    $(this).find('[data-role=content]').html('<p>Dynamically created page</p>');
});