Iterate and add Class to Each Paragraph

Question

I'm trying to add a class "ignore" to the first P and a class "style" for the last P for each block.

<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>

This is my jquery, but it's not returning the expected results.

  $(".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

letiagoalves · Accepted Answer · 2013-03-15T23:22:43.393

11

Is this what you want? DEMO. If so, you don't need to use .each function.

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

edited Mar 15 '13 at 23:22

answered Mar 15 '13 at 22:24

letiagoalves

11,224
4
40
66

that's a much cleaner and simplyer way to do that for sure. i thought i had to use the .each function. thanks for the insight – Evan Mar 15 '13 at 22:33
@Evan you can do it using **.each** and **.find** functions but in this case it is not necessary. One advantage (and at the same time disadvantage) of jQuery is that sometimes you can do one thing by different ways – letiagoalves Mar 15 '13 at 22:38
i just realized, when i put my code into place, when i have more than just 2 blocks, lets say 8 blocks, then i would need to use the .each – Evan Mar 15 '13 at 23:14
@Evan You still don't need **.each** function. In fact you only need one expression. See my updated answer and try it in your code. If you told me that it had more than 2 blocks I would answer differently – letiagoalves Mar 15 '13 at 23:25
Oh wow! Thanks for that! that worked perfectly and again, very clean. – Evan Mar 16 '13 at 01:38

score 1 · Answer 2 · answered Mar 15 '13 at 22:25

1

You're searching for the p element inside .tiles_large p and .tiles_small p, whereas it should just be .tiles_large and .tiles_small.

Updating that results in 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");
});

answered Mar 15 '13 at 22:25

hjpotter92

78,589
36
144
183

man, i so close. That did the trick. i'm such an idiot. thanks for the insight on my error. also, although in my example i provided 2 blocks, but really i have more than just 2 blocks and this iterates through all of them – Evan Mar 15 '13 at 23:21

score 1 · Answer 3 · answered Mar 15 '13 at 22:25

1

Use .titles_large p:first,.titles_small p:first and remove the complete .find(...) method.

answered Mar 15 '13 at 22:25

Wouter J

41,455
15
107
112

score 0 · Answer 4 · answered Mar 15 '13 at 22:25

0

This could be done like this:

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

answered Mar 15 '13 at 22:25

aorcsik

15,271
5
39
49

score 0 · Answer 5 · edited May 23 '17 at 11:57

When you run through .each, you are applying the function repeatedly to each <p> that gets picked up. Think you're looking for something more like

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

which is basically what @letiagoalves posted. I guess first-of-type is added in jQuery 1.9. Not sure if there's any specific advantage to it or not...

Edit: found a relevant thread that talks more about performance of .find("p").eq(0) and which browsers may or may not support first-of-type. Learned something new myself :)

Iterate and add Class to Each Paragraph

5 Answers5