更改导航图标

Question

我的页面在导航下方：

<ul class="fa-ul" id="filter">
    <li><i class="fa-li fa fa-folder-o"></i><a href="{{route('fotoindex')}}">Semua Foto</a></li>
    @forelse($albums as $al)
    <li><i class="fa-li fa fa-folder-o"></i><a href="{{route('fotofilter', $al->slug)}}" name="album">{{$al->nama}}</a></li>
    @empty
    @endforelse
</ul>

我已经成功地添加active类的a时，在给定的URL元素a元素与下面的代码的浏览器中打开：

<script type="text/javascript">
    jQuery(function($) {
        var path = window.location.href;
        $('#filter li a').each(function() {
            if (this.href === path) {
                $(this).addClass('active');
            }});
    });
</script>

现在我想知道如何更改i元素图标类？ 假设网址已打开，我想将图标类从fa-li fa fa-folder-o更改为fa-li fa fa-folder-open-o

仅此而已，谢谢！

Answer 1

$('#filter li a').each(function() {
  if (this.href === path) {
    $(this).siblings('i').removeClass("fa-folder-o").addClass("fa-folder-open-o active");
  }
});