CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Matthew Walker
Matthew Walker

Reputation: 193

Is there a way to dynamically change navbar text with jQuery

<div id="page1" data-role="page">
    <div data-role="header" data-position="fixed" align="center"><img src="img/VAWE-long-300x30-transparent.png" width="300" height="30" alt="" /></div>
    <div data-role="content" style="margin:0; padding:0;">
        <div id="wowslider-container1" style="padding-bottom:10px;">
            <div class="ws_images">
                <ul>
                    <li><img src="data1/images/catering_1.png" alt="" title="" id="wows1_0" /></li>
                    <li><img src="data1/images/rev._pamela_a._mann.png" alt="wowslider.com" title="" id="wows1_1" /></li>
                    <li><img src="data1/images/catering.png" alt="" title="" id="wows1_2" /></li>
                </ul>
            </div>
            <div class="ws_shadow"></div>
        </div>
        <script type="text/javascript" src="engine1/wowslider.js"></script>
        <script type="text/javascript" src="engine1/script.js"></script>
        <div style="padding-bottom:5px;">
            <img src="img/Wedding in a Box.png" style="width:100%!important;">
        </div>
        <div style="padding-bottom:5px;">
            <img src="img/Flutter My Shutter.png" style="width:100%!important;">
        </div>
        <div style="padding-bottom:5px;">
            <img src="img/Brock's riverside.png" style="width:100%!important;">
        </div>
    </div>
    <div data-role="footer" data-position="fixed">
        <div data-role="navbar" class="ui-nodisc-icon">
            <ul>
                <li><a href="#" class="ui-icon-home ui-btn-icon-top ui-btn-active">Home</a></li>
                <li><a href="#" class="ui-icon-calendar ui-btn-icon-top">Events</a></li>
                <li><a href="#" class="ui-icon-search ui-btn-icon-top">Vendors</a></li>
                <li><a href="#map" class="ui-icon-location ui-btn-icon-top">Map</a></li>
                <li><a href="#" onClick="loginCheck()" class="ui-icon-user ui-btn-icon-top">Profile</a></li>
            </ul>
        </div>
    </div>
</div>

I'm wondering if there is a way I can change the "Vendors" menu item as shown above, and change the text and icon to something different using jQuery in a pageinit function?

Upvotes: 0

Views: 1684

Answers (1)

Chris Cousins
Chris Cousins

Reputation: 1912

This would find an a element with the string Vendors in it, replace that string. It then can remove the class for the icon and replace it with something else.

$("a:contains('Vendors')").text('Different String');
$("a:contains('Vendors')").removeClass('ui-icon-search').addClass('ui-icon-location');

Upvotes: 1

Related Questions