迭代併爲每個段落添加類

我試圖給第一個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

迭代併爲每個段落添加類

回答

相關問題