javascript - 如何使用 JQuery 将 css 属性应用于子元素

Question

有没有办法选择一个具有多个子组件的组件，指向其中一个组件并应用 css 属性或某个类？

假设我有这个 div:

<div class="parent">
   <div>Child 1</div>
   <div>Child 2</div>
   <div>Child 3</div>
</div>

我想将 css 属性应用到第二个 div。

我已经尝试过这个:

$('.parent')[0].children[1].css('display', 'block')

但我收到此错误:无法读取未定义的属性“children”

我不明白的是，如果我将 $('.parent')[0].children[1] 登录到控制台，我会得到子 div，所以，我认为应该是这样，但看来我错了。

有办法做到这一点吗？

Answer 1

当您在 jQuery 对象上使用数组索引时，它返回一个 DOM 元素，而不是 jQuery 对象，因此您无法对其使用 jQuery 方法。使用 .eq() 将其保留为 jQuery 对象。

$('.parent').eq(0).children().eq(1).css('display', 'block');

.parent div {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
   <div>Child 1</div>
   <div>Child 2</div>
   <div>Child 3</div>
</div>