jQuery防止子记录

Question

I have a nav that i need to add a <br> dynamically because the CMS we are using doesn't allow for this.

But it is affecting all of the child elements on the drop down.

Here is the basic 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>

And here is the js that is adding the <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);
    });
});

But i want it to affect tab1 a only nothing on the dropdown. I have a fiddle created here http://jsfiddle.net/6CTY8/

Answer 1

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

Using > will make sure only direct descendants are used.

Here is a fiddle too. http://jsfiddle.net/6CTY8/2/

Answer 2

Use child selector .

From Docs:

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

Try this:

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

DEMO