jquery - 如何动态设置导航栏标签文本？

Question

我想使用脚本动态设置每个选项卡的名称。我不知道这样做的确切方法请帮助我？

这是html代码：

            <div data-theme="a" data-role="footer" data-position="fixed" data-tap-toggle="false">
            <div class="myNavBar" data-role="navbar" data-iconpos="top" >
                <ul>
                    <li >
                        <a href="#"  id="home_icon"  data-transition="pop" data-theme="a" data-icon="custom" class="ui-btn-active ui-state-persist" >
                            Home
                        </a>
                    </li>
                    <li >
                        <a href="favourites.html"  id="fav_icon" data-transition="pop" data-theme="a" data-icon="custom" >
                            Favorites
                        </a>
                    </li>
                    <li>
                        <a href="Recents.html" id="recent_icon" data-transition="pop" data-theme="a" data-icon="custom" >
                            Offers
                        </a>
                    </li>
                    <li>
                        <a href="Settings.html" id="setting_icon" data-transition="pop" data-theme="a" data-icon="custom" >
                            Settings
                        </a>
                    </li>
                </ul>
            </div>
       </div>

Answer 1

尝试这个。

var i=0,
navNames = ['home_icon', 'fav_icon', 'recent_icon', 'setting_icon'];

$('.myNavBar').find('li').each(function(){
    $(this).children('a').attr('id', navNames[i])
    i++;
});

Fiddle Demo

尝试这种方法将文本也放在导航栏上。

var i=0,
 navNames = {
                'Home': 'home_icon',
                'Favorites':'fav_icon',
                'Offers': 'recent_icon',
                'Settings': 'setting_icon'
            };

$.each(navNames, function(index, value){
    $('.myNavBar').find('li:eq('+i+')')
    .children('a').attr('id', value)
    .end().children('a').text(index);
    i++;
});

第二次演示

Answer 2

以上所有回答的方法都是正确的，但是在上述解决方案中，选项卡隐藏的图标仅显示更新的文本。正确的方法是$($('.ui-btn-text')[0]).html('testing');. 它将第一个选项卡的名称更改Home为testing.

Answer 3

尝试这个

$('ul li:eq(0) a').text('Your Text') //It will change 1st li text,same way others by 1,2,3

小提琴