迭代并为每个段落添加类

我试图给第一个P添加一个类“ignore”，为每个块添加最后一个P的类“style”。迭代并为每个段落添加类

<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

来源

2013-03-15 Evan

这是你想要的吗？ DEMO。如果是这样，则不需要使用。每个函数。

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

来源

2013-03-15 22:24:27 letiagoalves

这是一个更清洁和简单的方法来做到这一点。我以为我必须使用.each功能。谢谢你的洞察力 – Evan 2013-03-15 22:33:33

@Evan你可以使用**。**和** **来实现**，但在这种情况下，它不是必需的。 jQuery的一个优点（同时也是缺点）是，有时你可以通过不同的方式做一件事 – letiagoalves 2013-03-15 22:38:13

我刚刚意识到，当我把代码放到位的时候，当我有不止2块时，可以说8块，那么我将需要使用.each – Evan 2013-03-15 23:14:17

这可能就像这样：

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

来源

2013-03-15 22:25:00 aorcsik

你在里面.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"); 
});

来源

2013-03-15 22:25:36 hjpotter92

男人，我如此亲密。那就是诀窍。我真是个白痴。感谢您对我的错误的见解。此外，虽然在我的例子中，我提供了2个块，但实际上我不止有2个块，这遍历了所有这些块 – Evan 2013-03-15 23:21:18

使用.titles_large p:first,.titles_small p:first和取出完整.find(...)方法。

来源

2013-03-15 22:25:57

当您运行.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。学会了一些新的我自己:)

来源

2013-03-15 22:33:14 user1766760

迭代并为每个段落添加类

回答

相关问题