Как записать document.getElementsByClassName (names) [n] в jQuery

Question

Как написать

document.getElementsByClassName("navtab")[3].classList.add("active"); 

в jquery.

Моя попытка:

$(".navtab")[3].addClass("active");

Это выдало ошибку вроде:

index-page9. html: 745 Uncaught TypeError: $ (...) [3] .addClass не является функцией

Answer 1

$(".navtab")[3]

фактически возвращает элемент DOM, а метод .addClass() jQuery нельзя использовать для элементов DOM. Вам нужно использовать метод .eq(), чтобы получить nth index jQuery объект типа:

$(".navtab").eq(3).addClass("active");

Демо:

$(".navtab").eq(3).addClass("active");

.active { background-color: skyblue }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="navtab">List item 1</li>
  <li class="navtab">List item 2</li>
  <li class="navtab">List item 3</li>
  <li class="navtab">List item 4</li>
  <li class="navtab">List item 5</li>
</ul>

Answer 2

Вы можете использовать его в jquery следующим образом:

  var element = $('.navtab')[3];
  $(element).addClass("active");