title: How to fix strange behavior of attr("class") when using find().slice() in jQuery
body: <p>Can't seem to find logic in the problem I have with table header sorting arrows (for the time being only with the first one) I'm trying to control with jQuery.</p>
  
  <p>On page load and upon click the two arrows in clickable <strong>&lt;th&gt;</strong> should change: <br />Step 1: top one from red-colored upward caret to green-colored upward angle (from class <em>fas fa-caret-up</em> to class <em>fas fa-angle-up</em>) which is done nicely
  <br />Step 2: bottom one from green-colored downward angle to red-colored downward caret (from class <em>fas fa-angle-down</em> to <em>fas fa-caret-down</em>) but this one unfortunately becomes as messed-up as <strong>fa-angle-up fas fa-caret-down</strong>.</p>
  
  <p>The code I'm implementing so far is:<br /></p>
  
  <pre><code> 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"));
      }     
  </code></pre>
  
  <p>The table and first header shown below (the rest omitted for brevity):</p>
  
  <pre><code>&lt;table id="data_collector" class="table table-sm table-striped table-responsive-md btn-table table-hover"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th style="width:13ch; text-align:left" class="nums" onclick="makeAllSortable(0, this)"&gt;Test No
              &lt;div class="i-container"&gt;&lt;i class="fas fa-caret-up" style="color:red"&gt;&lt;/i&gt;&lt;i class="fas fa-angle-down"&gt;&lt;/i&gt;
              &lt;/div&gt;
            &lt;/th&gt;
  </code></pre>
  
  <p>
  ...
      </p>
  
  <p>The expected outcome should be:<br />
  <br />Step 1: top one from red-colored upward caret to green-colored upward angle (from class <em>fas fa-caret-up</em> to class <em>fas fa-angle-up</em>)
  <br />Step 2: bottom one from green-colored downward angle to red-colored downward caret (from class <em>fas fa-angle-down</em> to <em>fas fa-caret-down</em>).</p>
  
  <p>JsFiddle: <a href="https://jsfiddle.net/Gshegosh/3nwqzurf/28/" rel="nofollow noreferrer">https://jsfiddle.net/Gshegosh/3nwqzurf/28/</a></p>