Изменение стилей для определенного div в зависимости от их идентификатора

Question

Я хочу изменить цвет фона <div> с id с childDiv1 и childDiv4 только .. как это сделать ( примечание , что список div может быть огромным списком, а список div из массива) Например: -> stylingdivs:{'childDiv1','childDiv4'} пожалуйста, помогите мне с этим

<div class="parentDiv">
  <div class="childDiv1342">
    First Div Child
  </div>
  <div class="childDiv2244">
    Second Div Child
  </div>
  <div class="childDiv3342">
    Third Div Child
  </div>
  <div class="childDiv4324">
    Fourth Div Child
  </div>
  `<div class="childDiv5324">
    Fifth Div Child
  </div>`
  `<div class="childDiv6324">
    Sixth Div Child
  </div>`
  `<div class="childDiv7323">
    Seventh Div Child
  </div>`
</div>

Answer 1

Попробуйте сделать это с помощью jquery, чтобы задать цвет фона в 'childDiv1','childDiv4', в этом случае нет проблем, если список div может быть огромным.

Я думаю, вы хотите вот так:

 $(document).ready(function(){
               var parentDiv = $('.parentDiv').find('div')
               $(parentDiv).eq(0).css('background','green');
               $(parentDiv).eq(3).css('background','green');
           })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parentDiv">
  <div class="childDiv1">
    First Div Child
  </div>
  <div class="childDiv2">
    Second Div Child
  </div>
  <div class="childDiv3">
    Third Div Child
  </div>
  <div class="childDiv4">
    Fourth Div Child
  </div>
  `<div class="childDiv5">
    Fifth Div Child
  </div>`
  `<div class="childDiv6">
    Sixth Div Child
  </div>`
  `<div class="childDiv7">
    Seventh Div Child
  </div>`
</div>

Answer 2

Вы говорите id, поэтому я изменяю ваш html на id

<div class="parentDiv">
  <div id="childDiv1">
    First Div Child
  </div>
  <div id="childDiv2">
    Second Div Child
  </div>
  <div id="childDiv3">
    Third Div Child
  </div>
  <div id="childDiv4">
    Fourth Div Child
  </div>
  `<div id="childDiv5">
    Fifth Div Child
  </div>`
  `<div id="childDiv6">
    Sixth Div Child
  </div>`
  `<div id="childDiv7">
    Seventh Div Child
  </div>`
</div>

<script>
 document.selectAll("#childDiv1, #childDiv4").style.backgroundColor = "red";

</script>

Answer 3

Здесь ссылка на W3Schools Ссылка на селектор CSS ..

В вашем CSS просто введите:

.parentDiv > .childDiv1, .childDiv4 {
background-color: #666666;
}

или просто ссылаться на дочерние элементы

.childDiv1, .childDiv4 {
background-color: #666666;
}

Кстати: в вашем примере вы используете классы, а не идентификаторы.

Answer 4

Если вам нужно только иметь их статически, достаточно CSS:

.childDiv1, .childDiv4 {
  background-color: your-color;
}

Если они должны быть изменены динамически, простой Javascript должен работать для этого.

document.querySelectorAll(".childDiv1, .childDiv4").forEach(
  div => div.style.backgroundColor = "your-color");

Answer 5

Прочитайте CSS .class Selector, что поможет вам понять, как selectors работает в CSS.

Также, перечитайте jQuery Multiple Selector.

---

$('.childDiv1, .childDiv4').css('background-color', 'cyan');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parentDiv">
  <div class="childDiv1">
    First Div Child
  </div>
  <div class="childDiv2">
    Second Div Child
  </div>
  <div class="childDiv3">
    Third Div Child
  </div>
  <div class="childDiv4">
    Fourth Div Child
  </div>
  `<div class="childDiv5">
    Fifth Div Child
  </div>`
  `<div class="childDiv6">
    Sixth Div Child
  </div>`
  `<div class="childDiv7">
    Seventh Div Child
  </div>`
</div>