迭代并为每个段落添加类答案

【问题标题】：Iterate and add Class to Each Paragraph迭代并为每个段落添加类
【发布时间】：2013-03-16 07:22:43
【问题描述】：

我正在尝试为每个块的第一个 P 添加一个“忽略”类，并为最后一个 P 添加一个类“样式”。

<div class="tiles_large">
    <span class="spacer">&nbsp;</span>
       <p>image here</p>
    <span class="spacer">&nbsp;</span>
       <h4>headline here</h4>
    <span class="spacer">&nbsp;</span>
       <p>content here</p>
    <span class="spacer">&nbsp;</span>
    </div>

    <div class="tiles_small">
    <span class="spacer">&nbsp;</span>
       <p>image here</p>
    <span class="spacer">&nbsp;</span>
       <h4><div><span>headline here</span></div></h4>
    <span class="spacer">&nbsp;</span>
       <p>content here</p>
    <span class="spacer">&nbsp;</span>
    </div>

这是我的 jquery，但它没有返回预期的结果。

  $(".tiles_large p,.tiles_small p").each(function() {
    $(this).find("p:first").addClass("ignore");
  });

  $(".tiles_large p,.tiles_small p").each(function() {
    $(this).find("p:last").addClass("style");
  });

Here is my fiddle

【问题讨论】：

标签： jquery

【解决方案1】：

这是你想要的吗？ DEMO。如果是这样，您不需要使用 .each 函数。

$(".tiles_large,.tiles_small").find("p:first").addClass("ignore").end().find("p:last").addClass("style");

【讨论】：

这肯定是一种更清洁、更简单的方法。我以为我必须使用 .each 功能。感谢您的洞察力
@Evan 您可以使用 .each 和 .find 函数来完成此操作，但在这种情况下没有必要。 jQuery 的一个优点（同时也是缺点）是有时你可以通过不同的方式做一件事
我刚刚意识到，当我将代码放置到位时，当我有超过 2 个块时，比如说 8 个块，那么我需要使用 .each
@Evan 你仍然不需要 .each 函数。事实上，你只需要一个表达式。请参阅我更新的答案并在您的代码中尝试。如果你告诉我它有超过 2 个块，我会以不同的方式回答
哇哦！感谢那！效果很好，而且非常干净。

【解决方案2】：

您在.tiles_large p 和.tiles_small p 中搜索p 元素，而它应该只是.tiles_large 和.tiles_small。

更新导致this fiddle

$(".tiles_large,.tiles_small").each(function () {
    $(this).find("p:first").addClass("ignore");
});

$(".tiles_large,.tiles_small").each(function () {
    $(this).find("p:last").addClass("style");
});

【讨论】：

伙计，我离得很近。那成功了。我真是个白痴。感谢您对我的错误的洞察力。另外，虽然在我的示例中我提供了 2 个块，但实际上我有不止 2 个块，而且它会遍历所有块

【解决方案3】：

使用.titles_large p:first,.titles_small p:first 并删除完整的.find(...) 方法。

【讨论】：

【解决方案4】：

这可以这样完成：

$(".tiles_large, .tiles_small").each(function() {
    $("p:first", this).addClass("ignore");
    $("p:last", this).addClass("style");
});

【讨论】：

【解决方案5】：

当您运行.each 时，您将重复地将该函数应用于每个被拾取的<p>。认为您正在寻找更像

的东西

$(".tiles_large p:first-of-type,.tiles_small p:first-of-type").addClass("ignore");

这基本上是@letiagoalve 发布的内容。我猜first-of-type 是在 jQuery 1.9 中添加的。不确定它是否有任何特定的优势......

编辑：找到了一个相关的thread，它更多地讨论了.find("p").eq(0) 的性能以及哪些浏览器可能支持或不支持first-of-type。我自己学到了一些新东西:)

【讨论】：