in jQuery Mobile, how to set a data-transition for a group of links?

I would like to change开发者_开发知识库 the data-transition for all links in specific sections. The docs on jQuery Mobile page transitions (http://jquerymobile.com/test/docs/pages/docs-transitions.html) only specify how to set a transition type on a per-element basis by using an attribute.

I would prefer to manage interaction behavior entirely in the javascript layer, rather than the content. Setting an option for $.mobile.changePage() for a group of elements would be ideal, but I have not been able to figure out how to do that.

jQuery Mobile docs attribute example:

<a href="index.html" data-transition="pop">I'll pop</a>

If limited to setting data-transition by an attribute, it would be great if I could specify the transition on a parent element ('flip'):

<ul data-transition="flip">
    <li><a href="page1.html">I'll flip</a></li>
    <li><a href="page2.html">I'll flip too</a></li>
    <li><a href="page3.html">I'll flip as well</a></li>
</ul>
<a href="another_page.html">I'll use the default transition (eg slide)</a>

Unfortunately this doesn't seem to be how it works.

Currently my best solution is to add the section-specific data-transition attribute to all links within the appropriate section with javascript, but would prefer to handle this in a more performant manner. jQuery .attr solution:

$(document).ready(function(){
    $('ul a').attr('data-transition', 'flip');
});

Thank you!

UPDATED: Much easier implementation

Live Link:

• http://jsfiddle.net/EwyGL/10/

I used flip instead of pop to show the transition a little more, but just replace flip with pop.

HTML:

<div data-role="page" id="page1"> 
    <div data-role="content"> 
        <div class="content-primary">
            <ul data-role="listview" data-theme="c" data-dividertheme="f">
                <li data-role="list-divider">Transition Flip</li> 
                <li><a href="#page1">I'll Flip</a></li>
                <li><a href="#page2">I'll Flip too</a></li>
                <li><a href="#page3">I'll also Flip</a></li>
            </ul>
        </div>
    </div>
</div>
<div data-role="page" id="page2"> 
    <div data-role="content"> 
        <div class="content-primary">
            <ul data-role="listview" data-theme="c" data-dividertheme="f">
                <li data-role="list-divider">Transition Flip</li> 
                <li><a href="#page1">I'll Flip</a></li>
                <li><a href="#page2">I'll Flip too</a></li>
                <li><a href="#page3">I'll also Flip</a></li>
            </ul>
        </div>
    </div>
</div>
<div data-role="page" id="page3"> 
    <div data-role="content"> 
        <div class="content-primary">
            <ul data-role="listview" data-theme="c" data-dividertheme="f">
                <li data-role="list-divider">Transition Flip</li> 
                <li><a href="#page1">I'll Flip</a></li>
                <li><a href="#page2">I'll Flip too</a></li>
                <li><a href="#page3">I'll also Flip</a></li>
            </ul>
        </div>
    </div>
</div>

JS:

$('a').each(function() {
    $(this).attr('data-transition','flip'); 
});