выбрав n-й элемент в jQuery с помощью $ this

Question

У меня есть это длинное li, и я хочу выбрать последний Font Awesome с помощью $this, чтобы переключить класс или, если есть лучший способ сделать это, перейти на <i class="fas fa-check-circle"></I> в <i class="far fa-check-circle"></I>* 1005. *

$("li").on('click', function() {
  $(this).toggleClass("completed");
  $(this).children(".done").toggleClass("done-gold");
  $(this)("i:last").toggleClass("fas");
  $(this).children("i:last").toggleClass("far");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li> 
    <span class="delete"><i class="fas fa-trash"></i></span>
    <i class="far fa-hand-point-right"></i>
    clean up your room
    <span class="done"><i class="fas fa-check-circle"></i></span>
  </li>
</ul>

Последние два, очевидно, не работают - я не знаю, как правильно выбрать это

Answer 1

Use: $(this).find("i").last().toggleClass("fas");

$("li").on('click', function() {
  $(this).toggleClass("completed");
  $(this).children(".done").toggleClass("done-gold");
  $(this).find("i").last().toggleClass("fas");
  $(this).find("span").last().css("background-color", "red");
  $(this).children("i:last").toggleClass("far");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <span class="delete"><i class="fas fa-trash"></i></span>
    <i class="far fa-hand-point-right"></i> clean up your room
    <span class="done">Done<i class="fas fa-check-circle"></i></span>
  </li>
</ul>

Answer 2

Использование: $(this).find("i").last().toggleClass("fas");

$("li").on('click', function() {
  $(this).toggleClass("completed");
  $(this).children(".done").toggleClass("done-gold");
  $(this).find("i").last().toggleClass("fas");
  $(this).find("span").last().css("background-color", "red");
  $(this).children("i:last").toggleClass("far");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <span class="delete"><i class="fas fa-trash"></i></span>
    <i class="far fa-hand-point-right"></i> clean up your room
    <span class="done">Done<i class="fas fa-check-circle"></i></span>
  </li>
</ul>