Question

I have an unordered list styled as a horizontal nav-bar – in the last list item i have a search box with a class of pull-right as shown below…

 <div class="navbar">
    <ul>
      <li><a href="#">Coming Up</a></li>
      <li><a href="#">This Month</a></li>
      <li><a href="#">Next Month</a></li>
      <li><a href="#">All Events</a></li>
      <li><a href="#">Past Events</a></li>
      <li><a href="#">Contact Us</a></li>
      <li class="pull-right">
   <div id="event-serach-content">
    <form id="search-event" method="get" action="">
    <div class="event-search-box">
    <input type="text" placeholder="Search events..." id="frm-search" name="s">
          </div>
    <div class="event-submit-btn">
            <button type="submit">Go</button>
    </div>
    </form>
  </div>

    </li>
    </ul>

     </div>
<!-- navbar End //--> 

I have the following jQuery that adds/removes class ‘selected’ with the click event and appends span tags. Is there a way to ignore the last list i.e don’t add the selected class? The empty span tags have a Bg of a down arrow. Hope this makes sense, thanks in advance.

            $(document).ready(function () {

            $(".navbar ul li:first").addClass('selected').append('<span></span>');

                $(".navbar ul li").click(function(){
                     $(".navbar ul li").removeClass('selected').find('span').empty().remove();

                     $(this).addClass('selected');
                     if ( $(this).hasClass('selected') ) {
                         // $(".navbar ul li:last").removeClass('selected').find('span').empty().remove();
                          $(".navbar ul li").append('<span></span>')
                     }
                     return false
                });

            });

Answer 1

You can use :not and :last selectors:

$(".navbar ul li:not(:last)")