Javascript 将类似的类与jQuery.first（）组合

我试图删除多个div之间的公共类，但只针对每个div中的第一个

p

，以删除该类名

这是我的HTML：

<div class="items">
  <div class="wrapper">
    <div class="thing thing--one">
      <h2>This title</h2>
      <p class="extended-content">A good act does not wash out the bad, nor a bad act the good. Each should have its own reward. Words are like wind. And now his watch is ended. Bastards are born of passion, aren't they? We don't despise them in Dorne. King in the North.</p>
      <p class="extended-content">All men must die. It's ten thousand miles between Kings landing and the wall. A good act does not wash out the bad, nor a bad act the good. Each should have its own reward. The wolf and the lion. All men must die.</p>
    </div>
    <div class="thing thing--two">
      <h2>This title</h2>
      <p class="extended-content">A good act does not wash out the bad, nor a bad act the good. Each should have its own reward. Words are like wind. And now his watch is ended. Bastards are born of passion, aren't they? We don't despise them in Dorne. King in the North.</p>
      <p class="extended-content">All men must die. It's ten thousand miles between Kings landing and the wall. A good act does not wash out the bad, nor a bad act the good. Each should have its own reward. The wolf and the lion. All men must die.</p>
    </div>
    <div class="thing thing--three">
      <h2>This title</h2>
      <p class="extended-content">A good act does not wash out the bad, nor a bad act the good. Each should have its own reward. Words are like wind. And now his watch is ended. Bastards are born of passion, aren't they? We don't despise them in Dorne. King in the North.</p>
      <p class="extended-content">All men must die. It's ten thousand miles between Kings landing and the wall. A good act does not wash out the bad, nor a bad act the good. Each should have its own reward. The wolf and the lion. All men must die.</p>
    </div>
  </div>
</div>

它只从

thing--one

类中的第一个

p

中删除第一个

扩展内容

所以，现在我把它写成这样：

$(".thing--one p").first().removeClass("extended-content");
$(".thing--two p").first().removeClass("extended-content");
$(".thing--three p").first().removeClass("extended-content");

这是可行的，但这感觉和看起来都很臃肿，并不是移除这三个分区中普通类的最佳方式

关于如何使其更具语义，您有什么想法吗？
您可以使用索引选择器选择匹配集中索引
x
处的元素，如：

$(".thing--one p:eq(0), .thing--two p:eq(0), .thing--three p:eq(0)").removeClass("extended-content");

如果您想循环它们，最好使用jQuery方法：

$(".thing").map(function() {
    $('p:eq(0)', this).removeClass("extended-content");
});


setTimeout（函数（）{
$（“.thing--1p:eq（0），.thing--2p:eq（0），.thing--3p:eq（0）”.removeClass（“扩展内容”）；
}, 500);
。扩展内容{
背景颜色：粉红色；
}

本标题为1
好的行为不能洗去坏的，坏的行为也不能洗去好的
所有男人都必须死。国王登陆台和长城之间有一万英里
此标题为2
好的行为不能洗去坏的，坏的行为也不能洗去好的
所有男人都必须死。国王登陆台和长城之间有一万英里
此标题为3
好的行为不能洗去坏的，坏的行为也不能洗去好的。每个人都应该有自己的奖励。言语如风。而现在他的手表走完了。私生子生来就有激情，不是吗？在多恩，我们并不鄙视他们。北方的国王
所有男人都必须死。国王登陆台和长城之间有一万英里。好的行为不能洗去坏的，坏的行为也不能洗去好的。每个人都应该有自己的奖励。狼和狮子。所有人都必须死
 > p>这与你所做的功能完全相同，但我认为它对眼睛有点友好…

$(".thing--one, .thing--two, .thing--three").each(function() {
    $(this).find("p").first().removeClass("extended-content");
});

它查找所有容器元素，然后对内容运行
.find（）
，查找第一个
标记

除非有理由不这样做，否则你可以把它改成

$(".thing").each(function() { etc..

希望这有帮助


$（“.thing”）。每个（函数（i）{
$（this.find（“p”）.first（）.removeClass（“扩展内容”）；
});
。扩展内容{
颜色：红色；
}

这个标题
好的行为不能洗去坏的，坏的行为也不能洗去好的。每个人都应该有自己的奖励。言语如风。而现在他的手表走完了。私生子生来就有激情，不是吗？在多恩，我们并不鄙视他们。北方的国王
所有男人都必须死。国王登陆台和长城之间有一万英里。好的行为不能洗去坏的，坏的行为也不能洗去好的。每个人都应该有自己的奖励。狼和狮子。所有人都必须死
这个标题
好的行为不能洗去坏的，坏的行为也不能洗去好的。每个人都应该有自己的奖励。言语如风。而现在他的手表走完了。私生子生来就有激情，不是吗？在多恩，我们并不鄙视他们。北方的国王
所有男人都必须死。国王登陆台和长城之间有一万英里。好的行为不能洗去坏的，坏的行为也不能洗去好的。每个人都应该有自己的奖励。狼和狮子。所有人都必须死
这个标题
好的行为不能洗去坏的，坏的行为也不能洗去好的。每个人都应该有自己的奖励。言语如风。而现在他的手表走完了。私生子生来就有激情，不是吗？在多恩，我们并不鄙视他们。北方的国王
所有男人都必须死。国王登陆台和长城之间有一万英里。好的行为不能洗去坏的，坏的行为也不能洗去好的。每个人都应该有自己的奖励。狼和狮子。所有人都必须死

$(".thing").each(function() { etc..