jQuery - Having a problem with $(this).find(".event_recur").html()

Question

Hello,

I am trying get the html within .event_recur.

$(".entry").each(function(){
alert($(this).find(".event_recur").html());
});


<div class="entry">
<p class="event_title">June 21st Event - eat</p>

<p class="event_start_date">1277160289</p>
<p class="event_end_date">1277505889</p>
<p class="event_body"><p>June 21-25th
</p></p>
<p class="event_recur"><p>No
</p></p>
<p class="event_body"><p>June 21-25th
</p></p>

<p class="event_location"><p>Pac Sun
</p></p>
<p class="event_categories">
Eat
</p>

</div>

I get nothing when I do:

$(".entry").each(function(){
    alert($(this).find(".event_recur").html();
});

I was expecting:

<p>No
    </p>

Am I missing something? Thanks!

Answer 1

you are missing an document ready closure; i.e. change the invocation to:

$(function(){
  $(".entry").each(function(){
    alert($(this).find(".event_recur").html());
  });
});

(FYI, $(function(){}); is an alias for $(document).ready(function(){});)

Answer 2

No is not in any paragraph tag right now. It's outside your desired <p class="event_recur">.

Answer 3

Try wrapping your function like so:

$(function () {
  $(".entry").each(function(){
    alert($(this).find(".event_recur").html());
  });
});

That will delay execution until after the DOM is loaded.

Answer 4

So it looks like with HTML5 Doctype: nesting P tags was causing the issue with the selector. I'm not sure if why exactly but I turned .event-recur into a div and it output the html fine! YES!

Note to self: don't nest p tags with HTML5 doctype. I'm not positive its the doctype but maybe someone else can clarify.