更改子元素CSS包含活动类

我正在尝试调用一个函数，该函数验证元素是否包含活动类，是否在我的跨度中添加了图片，但是即使我有条件，所有跨度的问题也会添加img标签，有人可以向我解释为什么吗？我该如何解决？

我的Div

<div class="navbar-collapse collapse">
              <ul class="nav navbar-nav pull-right">
                  <li class="active"><a href="index.html"><span>Home</a></span><span></span></li>
                  <li><a href="reservation.html"><span>ChambresReservations</span></a><span></span></li>
                  <li><a href="contact.html"><span>Contact-US</span></a><span></span></li>
              </ul>
            </div>

我的JS

$(function(){
    var classExist=$(".navbar-collapse li").hasClass("active");
    if(classExist){
        $(this).find('span:nth-child(2)').append('<img src="images/site/bg-arrow-mr.png"/>')
    }
});