Question

我正在寻找一种选择多个父div的第一个子元素的方法，其中父div具有相同的类。这是我的HTML：

<div class="wrapper">
  <p>Select this paragraph</p>
</div>

<div class="wrapper">
  <img src="https://picsum.photos/200/300" title="Select this image">
  <p>Don't select this</p>
</div>

<div class="wrapper">
  <p>Select this paragraph</p>
  <p>Don't select this paragraph</p>
</div>

请在这里查看我的完整CodePen。

我试图选择类wrapper的每个div的第一个子元素，并将相同的类应用于所有这些子元素。我正在看一些类似的东西：

$('.wrapper').children(":first").addClass("noMargin");

此问题是，它仅选择第一个父div的子元素，但没有选择第三个包装器的img和第一个p。我认为您需要为此使用某种数组并将一个类应用于所有这些数组，但是如何才能做到这一点（最好使用jQuery）？

Answer 1

您接近了，您需要遍历具有.wrapper类的元素，并将noMargin类附加到其第一个孩子，即

$('.wrapper').each(function() { 
    $(this).children(":first").addClass("noMargin");
});

Answer 2

您可以使用以下示例，效果很好

$('.wrapper :nth-child(1)').addClass("noMargin");

或其他语法

$('.wrapper :first-child').addClass('noMargin');

选择多个父元素的第一个子元素，并将相同的类应用于所有

2 个答案: