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

Posted 2023-05-09

【中文标题】如何使用 JQuery 将 css 属性应用于子元素

【英文标题】：How to apply css property to a child element using JQuery

【发布时间】：2021-02-25 01:12:02

【问题描述】：

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

假设我有这个 div：

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

我想为第二个 div 应用一个 css 属性。

我试过了：

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

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

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

有没有办法做到这一点？

【问题讨论】：

删除[0] =))

【参考方案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>

【参考方案2】：

您可以在父元素上使用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>

【参考方案3】：

这段代码应该可以工作。

$(".container div").css("background-color", "red");

.container 
  background-color: blue;
  height: 100%;
  width: 100%;

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

只需给第二个 div 一个 ID，而不是使用 div 使用 #second-div-id。