CODEWITHSUNDEEP
jqueryhtml
Ankur
Ankur

Reputation: 75

Get Parent's Parent HTML in jquery

I have a few tags, here is the code

<p class="post-meta-ab"><span><a href="#">Diamond Burs set of 30 pcs A-24</a></span>

    <br /><span><i class="icon-circle"></i>Details: Diamond Burs set of 30 pcs very useful assorted shapes</span>

    <br /> <span><i class="icon-circle"></i>Shipping Weight: 100 gms</span>

    <br /><span><i class="icon-circle"></i>Price: &#8364; 2.50</span>

    <br /> <span><i class="icon-circle"></i>Quantity: <input type="text" style="width:20px" maxlength="100" name="a1" id="a1" />
                        <input type="submit" value="Add" style="margin-top:-8px" class="btn btn-danger" name="asubmit" id="a1sub" /></span>

</p>

My question is I am using

var productname = $(this).parent().html();

to get the details, but the details are coming of the tag, I want to get the tag of the span's tag i.e "p" tag's html.

EDIT X: I want to get the data inside the input type="text" is it possible?

EDIT X2: I am using this now

    $(this).parent().parent().text()+$(this).parents('p').find('input:text').val()

it tends to work, ok last thing I want to do is, Put space after each details, example put space after shipping weight, put space after price and so on.

Upvotes: 2

Views: 10902

Answers (5)

Fabricio
Fabricio

Reputation: 839

To know who the parent is or isn't you would have needed to tell us what is $(this). Since you didn't here goes the code to get the value of your edit field.

alert($(".post-meta-ab").find("#a1").attr("value"));

http://fiddle.jshell.net/hYhT6/

EDIT Now we know who &(this) is... :-) I would go with the sieblings and not parent as you intially. In this case if you use parent you will have to then do some traversing so why not do it directly from the current location.

One more edit A solution has been accepted but nevertheless here is my last take at it. The prev() method would come handier; like this:

$("#a1sub").click(function() {
   alert($(this).prev().attr("value"));
})

And the updated working fiddle

Upvotes: 1

James Donnelly
James Donnelly

Reputation: 128796

How to get the parent's parent

To get the parent's parent you can simply call the parent() method on the parent:

$(this).parent().parent();

Alternatively you can use jQuery's closest() method:

$(this).closest('p');

Here's a JSFiddle demo which shows both in use when initially targeting i.icon-circle.

To get the text, you can then simply call jQuery's text() method:

$(this).closest('p').text();

How to get the text input's value

As per an edit to the question, to pull the value of the text input you can either use:

$(this).closest('p').find('input[type="text"]').val();

Or, as the input has an id of "a1" (which is always unique), you can just use:

$('#a1').val();

How to put a space between the values

As per a further edit to the question, to put a space between the result you'd simply add it in using ... + " " + ..., like so:

...closest('p').text() + " " + $(this).closest('p')...

Upvotes: 4

SarathSprakash
SarathSprakash

Reputation: 4624

Try this

$(this).closest('p').find('input:text').val();

or 

$(this).parents('p').find('input:text').val();

Upvotes: 1

Sid
Sid

Reputation: 371

Try using $(this).parent().parent().text();

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388436

You can use .closest() along with .outerHTML if you want the html including <p>...</p>

$(this).closest('p')[0].outerHTML

Upvotes: 1

Related Questions