jQuery needs to return entire object and not just containing data

Question

How do I get jQuery to return the entire

<div class="loan_officer_apply_now_link"><a href="">APPLY NOW!</a></div>

Currently it only returns the contain "a" element

<a href="">APPLY NOW!</a>

Test Code

$('a').click(function(){
    alert($('.loan_officer_apply_now_link').html());
})

http://jsfiddle.net/gUd9J/1/

http://stackoverflow.com/questions/2419749/get-selected-elements-outer-html — Chris, Aug 21 '13 at 15:27
@Rfvgyhn similar questions but the top solutions for that question are woefully outdated compared to the working answers on this page. — Julian, Aug 21 '13 at 15:36

score 5 · Answer 1 · answered Aug 21 '13 at 15:26

5

Use the native JS .outerHTML property instead of just the jQuery .html() function. It will make you life a lot easier, instead of trying to do fancy jQuery wraps. You can do this with the following:

$(selector)[0].outerHTML // This is your HTML code

answered Aug 21 '13 at 15:26

LoveAndCoding

7,857
2
31
55

I'm guessing you haven't tested this. – Rory McCrossan Aug 21 '13 at 15:27
@RoryMcCrossan what makes you say that :P – LoveAndCoding Aug 21 '13 at 15:28
Yeah, thought for a second jQuery exposed it, but I was wrong. Did a quick ninja edit to fix things up :) – LoveAndCoding Aug 21 '13 at 15:30

score 2 · Accepted Answer · answered Aug 21 '13 at 15:27

2

You can also use the element's outerHTML property

$('a').click(function(){
    alert($('.loan_officer_apply_now_link').get(0).outerHTML);
})

Demo: Fiddle

answered Aug 21 '13 at 15:27

Arun P Johny

384,651
66
527
531

What about the first link? – Rory McCrossan Aug 21 '13 at 15:28
@RoryMcCrossan which one – Arun P Johny Aug 21 '13 at 15:29

score 1 · Answer 3 · answered Aug 21 '13 at 15:26

1

jQuery doesn't have a built-in function for this.. here's one solution:

http://jsfiddle.net/TvWLL/

$('a').click(function(){
    alert($('.loan_officer_apply_now_link').clone().wrap('<div>').parent().html());
})

answered Aug 21 '13 at 15:26

Jason P

26,984
3
31
45

score 0 · Answer 4 · answered Aug 21 '13 at 15:27

0

give a wrapper class to it

<a href="#">Click Me</a><br /><br />
<div class="container">
<div class="loan_officer_apply_now_link"><a href="">APPLY NOW!</a></div>
</div>

$('a').click(function(){
    alert($('.container').html());
})

Working fiddle

answered Aug 21 '13 at 15:27

Mandeep Jain

2,304
4
22
38

score 0 · Answer 5 · answered Aug 21 '13 at 15:39

0

It appears you want the parents html:

$(this).parent()[0].outerHTML

answered Aug 21 '13 at 15:39

Mark Schultheiss

32,614
12
69
100

jQuery needs to return entire object and not just containing data

5 Answers5