使用jQuery .first()合并相似的类别

Question

我正在尝试删除多个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--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中常见类名的最佳方法。

有什么更语义化的想法吗？

- ultraloveninja

Answer 1

您可以使用索引选择器:eq(x)，它会选择匹配集合中索引为x的元素，例如：

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

如果你想循环它们，最好使用jQuery的方法 map() ：

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

setTimeout(function() {
  $(".thing--one p:eq(0), .thing--two p:eq(0), .thing--three p:eq(0)").removeClass("extended-content");
}, 500);

.extended-content {
  background-color: pink;
}

<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 1</h2>
      <p class="extended-content">A good act does not wash out the bad, nor a bad act the good.</p>
      <p class="extended-content">All men must die. It's ten thousand miles between Kings landing and the wall</p>
    </div>
    <div class="thing thing--two">
      <h2>This title 2</h2>
      <p class="extended-content">A good act does not wash out the bad, nor a bad act the good.</p>
      <p class="extended-content">All men must die. It's ten thousand miles between Kings landing and the wall.</p>
    </div>
    <div class="thing thing--three">
      <h2>This title 3</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>

- Zakaria Acharki

Answer 2

这个功能和你现在已经有的能够工作的代码在功能上完全一样，但我认为它更加易于阅读...

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

它会找到所有容器元素，然后在内容中运行.find()，找到第一个<p>标记。

除非有理由不这样做，你总是可以将其更改为...

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

- Reinstate Monica Cellio

Answer 3

希望这可以帮到你。

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

- Ussaid Iqbal