CODEWITHSUNDEEP
javascriptjqueryhtml
bernie2436
bernie2436

Reputation: 23901

How am I mis-using closest?

I have HTML that looks like this

<div id="1053906-cdm-contract-with-city-of-new-orleans-2013-fema" class="contract-container">
  <p class="contract-title contract">CDM- Contract with City of New Orleans: 2013-FEMA-3BCD COOPER GT TOWN DIXON CDM SMITH</p>
  <p class="contract-description contract">2013-FEMA-3BCD COOPER GT TOWN DIXON CDM SMITH</p>

   <div class="mention-text contract"><div class="page">Page 1</div> sometext </div> <br><br>


   <div class="mention-text contract"><div class="page">Page 16</div> some text</div> <br><br>


</div>

When a user clicks anywhere in the outer-most div, I want to find the closest "page". I use this jquery 

firsthtml = $(this).closest(".page").html();

This returns "undefined" for firsthtml

If I get rid of the .html() and hover over the firsthtml var -- I see that it returns the HTML for the entire div. In other words it returns multiple divs with class="page".

Why isn't it pulling only the first class with "page"?

Upvotes: 1

Views: 37

Answers (1)

ntgCleaner
ntgCleaner

Reputation: 5985

So there's a difference between .closest() and .find() and what you're trying to do.

http://api.jquery.com/closest/

closest and find navigate up and down the DOM tree. If you wanted to get the HTML of .page you would have to say something like

$(this).find('.page').html();

Since `.page' is almost the last element in your div structure.

If you're looking to get the HTML of the FIRST .page element, that is different. You'd have to say something like:

$('.page').eq(0).html()

.eq() is another way of saying .index() but it will select whichever element you want. If you want to select that page inside that specific div, you could possibly do

$(this).find('.page').eq(0).html();

Upvotes: 1

Related Questions