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

【问题标题】：add / remove class and append to an unordered list navigation using jQuery使用 jQuery 添加/删除类并附加到无序列表导航
【发布时间】：2012-12-06 08:58:22
【问题描述】：

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

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

            });

【问题讨论】：

为什么不将“a”标签作为点击事件的目标，您没有将 A 标签用于真实链接...？ :)
嗨，Marco - 不，目前还没有，项目仍处于起步阶段，所以我不确定那里发生了什么。到时候我会再去看看。感谢您的评论

标签： jquery

【解决方案1】：

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

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

【讨论】：

这是一种更好的方法，因为您只使用一个 jQuery 对象
感谢您的回答 - 我使用了 :not 和 :last 但我的语法有错误。这是一个很大的帮助:-)

【解决方案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
            });

【讨论】：

【解决方案3】：

在这种情况下，您只需在 click 函数中添加一个条件来检查最后一个孩子。

$('.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
});

【讨论】：