Javascript: элемент первого класса только для стиля

#javascript #jquery

Вопрос:

У меня есть эти классы и входные данные, которые генерируются программно:

 <div class="inputHolder">
  <input type="button" class="inputclss" value="1">
</div>
<div class="inputHolder">
  <input type="button" class="inputclss" value="2">
</div>
<div class="inputHolder">
  <input type="button" class="inputclss" value="3">
</div>

Я хотел бы стилизовать только первый класс. Это то, что я сделал для достижения этой цели, но безуспешно.

  const timeInputs = document.getElementsByClassName("inputHolder");
  for (var i = 0; i < timeInputs.length; i  ) {
    if (timeInputs[0]) {
      $("input").css({ "backgroundColor": "black", "color": "white" });
    }
  }

1. Чистым решением CSS было бы: .inputHolder:nth-child(1) input {background-color: black; color: white;} .

2. Зачем цикл, если вы хотите изменить только первый?

3. @epascarello как упоминалось в моем посте, я получаю их программно сгенерированными. Иногда существует только один элемент с одним входом, поэтому, если я не выполняю цикл, изменения применяются только тогда, когда есть больше divs с их соответствующими входами.

4. В вашем тексте говорится: «Я хотел бы стилизовать только первый класс» Итак, опять же, зачем цикл? Странно, что вы также смешиваете jQuery и DOM. Это не лучшая практика. $(".inputHolder").eq(0).css({});

Ответ №1:

Здесь вообще нет необходимости в javascript. Просто используйте css. Это работает, даже если они генерируются динамически и если имеется 1 или более элементов div.

 .inputHolder:nth-child(1) input {
  background-color: black;
  color:white
}

 <div class="inputHolder">
  <input type="button" class="inputclss" value="1">
</div>
<div class="inputHolder">
  <input type="button" class="inputclss" value="2">
</div>
<div class="inputHolder">
  <input type="button" class="inputclss" value="3">
</div>

Ответ №2:

Вот решение в чистом javascript.

 document.querySelector('.inputHolder .inputclss').classList.add('first')

 .first  {
    background-color: black;
    color: white;
}

 <div class="inputHolder">
    <input type="button" class="inputclss" value="1">
</div>
<div class="inputHolder">
    <input type="button" class="inputclss" value="2">
</div>
<div class="inputHolder">
    <input type="button" class="inputclss" value="3">
</div>

Ответ №3:

Надеюсь, я был полезен

 var x = document.getElementsByClassName("inputHolder")[0];
var timeInputs = x.getElementsByClassName('inputclss')[0];
timeInputs.setAttribute('style', 'background: #000; color: #fff;');

 <div class="inputHolder">
    <input type="button" class="inputclss" value="1">
</div>
<div class="inputHolder">
    <input type="button" class="inputclss" value="2">
</div>
<div class="inputHolder">
    <input type="button" class="inputclss" value="3">
</div>

1. Это работает, но, как я уже упоминал, divs генерируются программно. Иногда я получаю только один элемент inputHold с одним входом, поэтому получение элементов по индексу 0 в этом случае не работает, но работает, когда элементов больше

2. @Zeusox, этот код должен работать всегда, будь то один элемент DIV или несколько. Важно загружать код после создания элементов DIV

Ответ №4:

Как я вижу, вы пытаетесь использовать собственный javascript и jQ тоже .. попробуйте использовать всю мощь jQuery 🙂

 $('.inputHolder input:first').css({ "backgroundColor": "black", "color": "white" });