优化JavaScript / jQuery函数以获得更好的性能

Question

我有以下功能：

    // Change nav item in header in order to display it shorter
    function toggleInnerHtml(){
        $('#header .top ul li span, .banner nav.company li a span').each(function(index, value){

            var nav_item_text = value.innerHTML;

            for (i = 0; i < nav_item_text.length; i++) { 
                if(nav_item_text == 'Häufig gestellte Fragen (FAQ) - Übersicht' ){
                    nav_item_text = 'FAQ';
                    this.innerHTML = nav_item_text;
                 }
            }

        });         
    }

    toggleInnerHtml();

该功能进入我页面的标题，并将菜单项“HäufiggestellteFragen（FAQ） - Übersicht”的名称更改为“FAQ”。但是，这个功能运行得太慢，所以“HäufiggestellteFragen（FAQ） - Übersicht”总是出现在“FAQ”出现之前。

有没有办法优化我的功能，以便不再出现此错误？不幸的是，我必须以这种方式解决它，因为我的CMS根据CMS中的页面名称生成菜单项。

Answer 1

.each中的循环不是必需的。

function toggleInnerHtml(){
    $('#header .top ul li span, .banner nav.company li a span').html(function(){
       if($(this).html() === 'Häufig gestellte Fragen (FAQ) - Übersicht' )
          return "FAQ";
       return $(this).html();
    });         
}

这应该更快。

您可能仍会看到旧文本的闪烁，因为它将首先渲染，以便修复您应该考虑使用一些CSS来隐藏文本，然后在文本更改后显示它。

Answer 2

你可以使用contain试试这个：

var elm = $(".banner nav.company li a span:contains('Häufig gestellte Fragen (FAQ) - Übersicht')");

elm.text("FAQ");

和

 elm = $("#header .top ul li span:contains('Häufig gestellte Fragen (FAQ) - Übersicht')");
elm.text("FAQ");