javascript - 将类似的类与 jQuery .first() 结合起来

Question

我试图删除多个 div 之间的公共(public)类，但只针对每个 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--two p, .thing--three p").first().removeClass("extended-content");

它只从 thing--one 类中的第一个 p 中删除第一个 extended-content 类。

所以，目前我是这样写的:

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

这行得通，但感觉和看起来真的很臃肿，并不是删除这三个 div 中的公共(public)类的最佳方法。

关于如何使它更具语义性的任何想法？

Answer 1

希望对你有帮助

$(".thing").each(function(i) {
  $(this).find("p").first().removeClass("extended-content");
});

.extended-content {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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