jQuery脚本有时会工作，有时则不行

Question

好的，我有这个脚本......

    jQuery(document).ready(function(){
      var tabs = ["tab7", "tab9", "tab10", "tab11", "tab17", "tab25"];
      jQuery.each(tabs, function(index, value){
        var el = $("#"+value+" a");
        var html = el.html().split(" ");
        html = html[0] + "<br>" + html.slice(1).join(" ");
        el.html(html);
        el.css({"line-height" : "19px","text-align" : "center","padding-top" : "20px","height" : "58px"});
      });
    });

在两个单词的导航项之间添加换行符。但有时它影响subnav，有时它不影响subnav。它可以在网站的任何页面上工作或不工作。刷新浏览器后，它可能会或可能不会影响子窗口。查看两个版本的屏幕截图。但是，与正确的版本相比，它更加混乱了。我的脚本中的某些东西正在影响它吗？或者有什么我可以添加，以使其不影响subnav

如果它有帮助，这里是导航项目的LI的HTML。

<li id="tab7" class="hasChildren">
    <a href="/s.nl/c.1334893/sc.7/.f" style="line-height: 19px; text-align: center; padding-top: 20px; height: 58px;">Featured<br>Items</a>
    <ul class="submenu">
        <li><a href="/s.nl/c.1334893/sc.7/category.86/.f" style="line-height: 19px; text-align: center; padding-top: 20px; height: 58px;">Featured<br>Items</a></li>
        <li><a href="/s.nl/c.1334893/sc.7/category.87/.f" style="line-height: 19px; text-align: center; padding-top: 20px; height: 58px;">Featured<br>Items</a></li>
    </ul>
</li>

Answer 1

这与children的工作方式相同，而且可能更快：

var el = $("#"+value+" > a");

或

var el = $("#"+value).find("> a");

关闭主题，但是你对id的使用效率不高，你应该引用一个类，然后如果你需要使用节点存储数据使用hml5数据属性：

<li data-tabid="7" class="tab hasChildren">
<a href="/s.nl/c.1334893/sc.7/.f" style="line-height: 19px; text-align: center; padding-top: 20px; height: 58px;">Featured<br>Items</a>
<ul class="submenu">
    <li><a href="/s.nl/c.1334893/sc.7/category.86/.f" style="line-height: 19px; text-align: center; padding-top: 20px; height: 58px;">Featured<br>Items</a></li>
    <li><a href="/s.nl/c.1334893/sc.7/category.87/.f" style="line-height: 19px; text-align: center; padding-top: 20px; height: 58px;">Featured<br>Items</a></li>
</ul>
</li>

JS

jQuery(function($,undefined){
  var $tabs =$(".tab");
  $tabs.each(function(){
    var $el = $(this).find(">a");
    var html = $el.html().split(" ");
    $el.html(html[0] + "<br>" + html.slice(1).join(" "))
       .css({"line-height" : "19px","text-align" : "center","padding-top" : "20px","height" : "58px"});
  });
});

最后将css行移动到类

中的css文件中

 .twolines {line-height: 19px; //...

然后代替.css(... .hadClass("twolines")

首先简单的步骤，以整洁的代码和＆amp;优雅...... g'luck