Как использовать JS удалить или переименовать первый элемент из нескольких элементов с тем же классом?

Question

Код:

<input class="date" value="${dateList}" /> 
<input class="date" value="${dateList}" />

У меня есть 2 ввода с классом = дата, значения взяты из контроллера, каждый день значения разные, как удалить или переименовать класс первого ввода, класс = дата?

Answer 1

Использование :first:

$("input:first-child").removeClass("date").addClass("differentDate");

Демо-версия:

$("input:first").removeClass("date").addClass("differentDate");

.differentDate {
  background-color: red;
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<input class="date" value="Date">
<input class="date" value="Date">

Answer 2

Вы можете использовать eq в jquery ref https://api.jquery.com/eq/

$('.date').eq(0).addClass('new').removeClass('date')

.new
{
border:1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="date" value="a" /> 
<input class="date" value="b" />

Answer 3

Вы можете использовать селектор jQuery:

$("input:first-child").removeClass("date"); 
$("input:first-child").addClass("myNewClass");

https://api.jquery.com/first-child-selector/