0

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

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

            });
4

3 回答 3

1

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

$(".navbar ul li:not(:last)")
于 2012-12-06T09:02:34.807 回答
1

减少您将单击事件绑定到使用的选定元素集: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
            });
于 2012-12-06T09:05:09.197 回答
0

在这种情况下，您只需要在 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
});
于 2012-12-06T09:02:53.340 回答