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");

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

所以，目前我把它写成这样：

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

这是可行的，但感觉确实很really肿，并不是在这三个div中删除普通类的最佳方法。

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

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>

Answer 2

这在功能上与您所使用的功能完全相同，但我认为它在外观上更友好...

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

找到所有容器元素，然后对内容运行.find()，找到第一个<p>标签。

除非有理由不这样做，否则您可以随时将其更改为...

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

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>

结合类似的类与jQuery .first（）

3 个答案: