如何使用jQuery链接方法

Question

小提琴：https://jsfiddle.net/ph12bbax/

我正在创建导航栏，我希望removeClass('active')和removeClass('border')来自非活动项目。我正在尝试

  <ul class="nav navbar-nav navbar-right">
     <li><a href="#"><span class="active">home</span><div class="border"></div></a></li>
     <li><a href="#"><span>portfolio</span></a></li>
     <li><a href="#"><span>contact</span></a></li>
  </ul>

JS

$('.navbar-nav > li > a ').on('click', function(){

$(this).children('span').addClass('active')
    .parent('a').append('<div class="border"></div>')
    .siblings().children('span').removeClass('active');
});

Answer 1

选中fiddle。

$('.navbar-nav > li > a ').on('click', function () {
$(this).append('<div class="border"></div>')
    .children('span').addClass('active').parents('li')
    .siblings('li').find('span').removeClass('active')
    .siblings('.border').remove();
});

基本上您正在.navbar-nav > li > a执行该功能，因此$(this)代表a。然后：

1. 你应该.border加上
2. 然后获取span的{​​{1}} 孩子并向其添加课程$(this)
3. 然后获取active 父母的兄弟
4. 然后找到孩子 li并删除课程span
5. 然后选择active 兄弟姐妹将其删除

Answer 2

在简单的修改中，您可以在添加类之前删除所有活动和边框，如下所示。

$('.navbar-nav > li > a ').on('click', function(){
     $('.navbar-nav > li > a span').removeClass('active'); // Remove active
    $('.navbar-nav > li > a div').removeClass('border'); // Remove border
    $(this).children('span').addClass('active')
        .parent('a').append('<div class="border"></div>')
        .siblings().children('span').removeClass('active');

    // and i also want to remove class border on inactive element
});

的jsfiddle：https://jsfiddle.net/ph12bbax/5/