Combine Similar Classes with jQuery .first()

Question

I'm trying to remove a common class between multiple divs but only target the first p in each div to remove that class name.

Here's my 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>

When I do this:

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

It only removes the first extended-content class from the first p in the thing--one class.

So, currently I have it written out like this:

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

Which works, but that feels and seems really bloated and not the best way to go about removing a common class in those three divs.

Any ideas on how to make that a bit more semantic?

Answer 1

Hope this helps

$(".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>