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')

但我收到此错误：Cannot read property 'children' of undefined

我不明白的是，如果我登录$('.parent')[0].children[1]控制台，我会得到子 div，所以，我认为这就是方法，但似乎我错了。

有没有办法做到这一点？

标签： javascripthtmljquerycssdom

Answer 1

您可以find在父元素上使用方法选择所有子div元素，然后使用eq方法按索引选择特定子元素。

您也可以使用选择器来做到这一点，例如$('.parent > div:eq(1)')

$('.parent').find('div').eq(1).css('color', 'red')

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