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

bz4sfanl  于 2023-08-01  发布在  其他
关注(0)|答案(3)|浏览(123)

我正在寻找一种方法来选择多个父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的子元素,但不选择第三个 Package 器的img和第一个p。我想你需要某种数组来实现这一点,并将一个类应用于所有这些数组,但我如何才能实现这一点(最好使用jQuery)?

vwkv1x7d

vwkv1x7d1#

你很接近了,你需要的是遍历具有.wrapper类的元素,并将noMargin类附加到它们的第一个子元素,即

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

字符串

g0czyy6m

g0czyy6m2#

你可以使用下面的样品,它工作正常

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

字符串
或其他语法

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

blmhpbnm

blmhpbnm3#

虽然我完全理解OP想要一个使用jQuery的解决方案,但我将在这里发布一个本地JavaScript解决方案。
选择具有特定类的所有元素,然后循环遍历每个元素并获取第一个子元素。如果存在第一个子级,可以做任何你想做的事情,在这种情况下,添加一个特定的类。

document.addEventListener("DOMContentLoaded", function () {
    var wrappers = document.getElementsByClassName("wrapper");
    for (var i = 0; i < wrappers.length; i++) {
        var firstChild = wrappers[i].children[0];
        if (firstChild) {
            firstChild.classList.add("hidden");
        }
    }
});
.hidden {
   display: none;
}
<div class="wrapper">
  <p>Select this paragraph</p>
</div>

<div class="wrapper">
  <img src="https://picsum.photos/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>

相关问题