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); 
    }); 
}); 

的JS，但我希望它影響到下拉TAB1僅罷了。我有一個小提琴在這裏創建http://jsfiddle.net/6CTY8/

Answer 1

使用child selector。

從文檔：

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

試試這個：

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

DEMO

Answer 2

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

使用>將確保只有直系後代被使用。

這裏也是一個小提琴。 http://jsfiddle.net/6CTY8/2/