如何修复在jQuery中使用find（）.slice（）时attr（“class”）的奇怪行为

问：

似乎无法在我尝试用 jQuery 控制的表头排序箭头（暂时只有第一个）的问题中找到逻辑。

在页面加载时，单击可单击<中的两个箭头>应该更改： 第 1 步：顶部一个从红色向上插入符号到绿色向上角度（从 fas fa-caret-up 类到 fas fa-angle 向上），这做得很好
第 2 步：
底部一个从绿色向下角度到红色向下插入符号（从 fas fa-angle 向下到 fas fa-caret-down），但不幸的是，这个变得一团糟了fa-angle-up fas fa-caret-down。

到目前为止，我正在实现的代码是：

 if ($(header).find("i").slice(0).attr("class") === "fas fa-caret-up") {
        alert($(header).find("i").slice(0).attr("class") + "\n" + $(header).find("i").slice(1).attr("class"));
        ($(header).find("i").slice(0).removeClass("fas fa-caret-up").addClass("fas fa-angle-up").css({ "color": "green", "font-size": "16px" }));
        alert($(header).find("i").slice(0).attr("class") + "\n" + $(header).find("i").slice(1).attr("class"));
        ($(header).find("i").slice(1).removeClass("fas fa-angle-down").addClass("fas fa-caret-down").css({ "color": "red", "font-size": "18px", "left": "0" }));
        dir = "desc";
        alert($(header).find("i").slice(0).attr("class") + "\n" + $(header).find("i").slice(1).attr("class"));
    }     

下面显示了表格和第一个标题（为简洁起见，省略了其余部分）：

<table id="data_collector" class="table table-sm table-striped table-responsive-md btn-table table-hover">
      <thead>
        <tr>
          <th style="width:13ch; text-align:left" class="nums" onclick="makeAllSortable(0, this)">Test No
            <div class="i-container"><i class="fas fa-caret-up" style="color:red"></i><i class="fas fa-angle-down"></i>
            </div>
          </th>

...

预期结果应该是： 第 1 步：顶部从红色向上插入符号到绿色向上角度（从 fas fa-caret-up 类到 fas fa-angle 向上）
第 2 步：

底部从绿色向下角度到红色向下插入符号（从 fas fa-angle 向下到 fas fa-caret-down）。

JsFiddle：https://jsfiddle.net/Gshegosh/3nwqzurf/28/