jquery - 兄弟が動かない

Question

font-awesomeの要素を切り替えることを試みています。

aタグがクリックされたときに、font-awesome要素を削除します。 font-awesome要素は、現在クリックされているaタグの場合にのみ表示されます。

[FIDDLE] [1]

マイJSコード。

$(document).ready(function() { 
    $('.nav ul li:first').append($("<i class='fa fa-chevron-right' aria-hidden='true'></i>")); 
    $('.nav ul li a').click(function(event) { 
    event.preventDefault(); 
    $(this).append($("<i class='fa fa-chevron-right' aria-hidden='true'></i>")); 
$(this).parent().siblings().removeClass('fa fa-chevron-right'); // not working 
     }); 

    }); 

Answer 1

私はあなたが答えを受け入れていることを知っているが、あなたはすべてのそのロジックを必要としない - あなたがしなければならないすべては、現在選択されているリチウム上のアクティブなクラスが設定されていますCSSを使用してFAアイコンをその要素に追加します。次に、各liをクリックすると、リストからアクティブなクラスが削除され、選択されたl = i - に適用され、アイコンが魔法のように移動します。私はevent.preventDefault（）を適用していないことに注意してください。のクリックに - 私は彼らが実際にあなたが望む要素にナビゲートすべきだと推測します - 彼らはnavリストにあるからです。

アクティブなクラスをliに設定する利点は、アイコンを追加するだけでなく、スタイルを自由にカスタマイズできることです。

$(document).ready(function() { 
 
    $('nav ul li').click(function(){ 
 
    $('nav ul li').removeClass('active'); 
 
    $(this).addClass('active'); 
 
    }) 
 
});

nav ul li.active:after { 
 
    font-family: FontAwesome; 
 
    content: "\f054"; 
 
    padding-left: 5px; 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<nav> 
 
    <ul> 
 
    <li class="active"><a href="#">Page 1</a></li> 
 
    <li><a href="#">Page 2</a></li> 
 
    <li><a href="#">Page 3</a></li> 
 
    <li><a href="#">Page 4</a></li> 
 
    </ul> 
 
</nav>

Answer 2

$(document).ready(function() { 
 
    var fontAwesome = $('<i/>').addClass('fa fa-chevron-right'); 
 
    $('.nav ul li:first').append(fontAwesome); 
 
    $('.nav ul li a').on('click', function(event) { 
 
    event.preventDefault(); 
 
    $('.nav ul li a i.fa.fa-chevron-right').remove(); 
 
    $(this).append(fontAwesome); 
 
    }); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="nav"> 
 
    <ul> 
 
    <li><a href="#section-features">Option A</a></li> 
 
    <li><a href="#section-functions">Option B</a></li> 
 
    <li><a href="#section-pecifications">Option C</a></li> 
 
    </ul> 
 
</div>