Question

我有一个无序列表样式为水平导航栏 - 在最后一个列表项中，我有一个带右拉类的搜索框，如下所示...

 <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 //-->

我有以下jQuery使用click事件添加/删除类'selected'并附加span标记。有没有办法忽略最后一个列表，即不添加选定的类？空span标签有一个向下箭头的Bg。希望这是有道理的，谢谢你提前。

            $(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

您可以使用:not和:last选择器：

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

Answer 2

将使用:not(:last)

绑定点击事件的所选元素集减少

            $(".navbar ul li:not(:last)").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 3

您只需在点击功能中添加一个条件，以检查此案例中的最后一个孩子。

$('.navbar ul li').click(function(e) {
    // If LI is not last child append class
    if ( ! $(this).is(':last-child') ) {
        $(".navbar ul li").removeClass('selected').find('span').empty().remove();
    }

    // Rest of code for click
});

添加/删除类并使用jQuery附加到无序列表导航

3 个答案: