在 jQuery 中使用 find().slice() 时如何解决 attr("class") 的奇怪行为

Question

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

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

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

【问题讨论】：

Answer 1

好的，所以我在进一步阅读时想通了。 slice() 允许第二个参数，这是我帖子的答案。