根据 id 更改某些 div 的样式

Question

我只想更改ids childDiv1 和childDiv4 的<div>s 的背景颜色..如何做这样的事情（注意列表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

阅读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>

Answer 2

如果你只需要静态的，CSS就足够了：

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

如果它们需要动态更改，简单的 Javascript 应该可以解决这个问题。

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

Answer 3

你说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 4

这里是 W3Schools CSS selector reference..的链接。

在你的 css 中简单地说：

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

或者只是引用子 div

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

顺便说一句：您在示例中使用的是类，而不是 ids..

Answer 5

尝试使用 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>