jQuery防止子记录

Question

我有一个导航，我需要动态添加<br>因为我们正在使用的CMS不允许这样做。

但这会影响下拉菜单中的所有子元素。

这是基本的HTML

<li class="dropdown yamm-fw" id="tab1"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Shop By Brand</a>
  <ul class="dropdown-menu">
       <ul class="col-sm-2 megaDropDown">
          <li><a href="#">List Item</a></li>
          <li><a href="#">List Item</a></li>
          <li><a href="#">List Item</a></li>
          <li><a href="#">List Item</a></li>
          <li><a href="#">List Item</a></li>
          <li><a href="#">List Item</a></li>
       </ul>
  </ul>
</li>

这是添加<br>

$(function(){
    $('#tab1 a').each(function( index ) {
        var aHtml = $(this).html();
        var pos = aHtml.lastIndexOf(' ');
        aHtml = aHtml.substring(0,pos) + '<br/>' + aHtml.substring(pos+1)
        $(this).html(aHtml);
    });
});

但是我希望它对tab1的下拉列表没有任何影响。 我在这里创建了一个小提琴http://jsfiddle.net/6CTY8/

Answer 1

$('#tab1 > a').each(function( index ) {

使用>将确保仅使用直接后代。

这也是一个小提琴。 http://jsfiddle.net/6CTY8/2/

Answer 2

使用child selector 。

从文档中：

Selects all direct child elements specified by "child" of elements specified 
by "parent".

尝试这个：

$('#tab1 > a').each(function( index ) {
        //YOUR CODE GOES HERE
});

演示