Target element

How to target specific elements within a page - Jquery Mobile.

HTML

<div data-role="page">
    <div data-role="header" data-position="fixed">
         <h1>Header<span> - 2013</span></h1>

    </div> <a href="#" data-role="button" id="head">Find "span" in [data-role="header"] in Page</a>

    <a
    href="#" data-role="button" id="foot">Find "span" in [data-role="footer"]</a>
        <div data-role="footer" data-position="fixed">
       11
        </div>
</div>

CSS

.test { color: red; }

JavaScript

$('a#head').on('click', function () {
    $('[data-role="page"]').find('[data-role="header"] span').addClass('test');
});
$('a#foot').on('click', function () {
    $('[data-role="footer"]:contains("11")').css('color', 'red');
});