Question

与以下CSS操作等效的JavaScript / jquery是什么。

.outer-content-warrap > * {
  background-color: yellow;
}

我尝试使用此方法，但它仅适用于第一个子div，而不适用于其他子div

$(".outer-content-warrap").children().css('background-color','yellow');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="outer-content-warrap">
  <div>div1</div>
  <div>div2</div>
  <div>
    div3
    <div>div3.1</div>
    <div>
      div3.2
      <div>div3.2.1</div>
    </div>
  </div>
</div>

result of css:

result of jquery

Answer 1

console.log('I have', $('.outer-content-warrap').length, '.outer-content-warrap');
console.log('I have', $('.outer-content-warrap').children().length, '.outer-content-warrap children');
console.log('I have', $('.outer-content-warrap > *').length, '.outer-content-warrap > *');

$('.outer-content-warrap').children().css('backgroundColor', 'yellow');

setTimeout(() => { $('.outer-content-warrap > *').css('backgroundColor', 'orange'); }, 5000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outer-content-warrap">
  <div>Yellow</div>
  <p>Yellow</p>
</div>

<div class="outer-content-warrap">
  <div>Yellow</div>
  <p>Yellow</p>
</div>

两者均应按预期进行。两者都捕获完全相同数量的子对象，并成功应用了背景色。您的代码可能还有另一个问题。请输入完整代码。

如何在jquery中访问CSS *选择器？

1 个答案: