如何使用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

檢查這個小提琴 。

$('.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附加.border
2. 然后得到span的兒童 $(this) ，並添加類active給它
3. 然后得到li 父母的 兄弟姐妹
4. 然后發現孩子們 span並刪除課堂active
5. 然后選擇.border 兄弟姐妹將其刪除

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/