Question

我正在尝试为第一个P添加一个“ignore”类，为每个块添加一个类“style”，用于最后一个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

Answer 1

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

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

Answer 2

您正在p和.tiles_large p内搜索.tiles_small 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");
});

Answer 3

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

Answer 4

这可以这样做：

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

Answer 5

当您浏览.each时，您会反复将该函数应用于被拾取的每个<p>。认为你正在寻找更像

的东西

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

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

修改：找到了一个相关thread，其中详细介绍了.find("p").eq(0)的效果以及哪些浏览器可能支持或不支持first-of-type。我自己学到了一些东西：）

迭代并向每个段落添加类

5 个答案: