Question

I have the following:

a = li.parent().parent().children('a, span');

I have a loop set up which starts with a link and goes up the chain.
If I understand this correctly then the code above selects a link if there is a span
following it. Therefore it correctly selects:

   <a ..>..<span>History</span> .. </a> and
   <a ..>..<span>Overview</span> .. </a>

However I do not want it to select:

   <a ..> ..<span class="toggle"></span>

From the following HTML:

<ul id="menu" class="arbo with-title">
   <li>
      <a class="title-a">
         <span>Overview</span></a>
      <ul>
         <li>
            <span class="toggle"></span>
            <a class="folder"><span>Background</span></a>
            <ul>
               <li><a data-href="/History" class="document-web"><span>History</span></a></li>
               <li><a data-href="/eatures" class="document-web"><span>Features</span></a></li>
               <li><a data-href="/Design-Goals" class="document-web"><span>Design Goals</span></a></li>
            </ul>
         </li>
         <li>

Is there a way that I can make the select at the top of this question not
notice a span with the class of toggle? Something like:

a = li.parent().parent().children('a, span(only if the element does not have a class of togggle)');

FYI here’s the loop code:

function populateBreadcrumb(a: JQuery, $breadcrumb: JQuery) {
  while (a.length > 0) {
     $breadcrumb.prepend('<li><a >'+a.html()+'</a></li>');
     var li = a.parent();
     a = li.parent().parent().children('a, span');
  }
}

Answer 1

You can do this with the :not selector:

a = li.parent().parent().children("a, span:not(.toggle)");

This should do the trick.

Though you might want to use find instead of children to get all spans:

$("#menu").find("a, span:not(.toggle)");

jsfiddle: http://jsfiddle.net/mGv6N/