Problems with targeting containing spans in jQuery

Question

I'm having a bit of strange trouble (I'm in datatables), targeting the containing spans of the page numbers. This is the html I'm running.

<span>
    <span class="target_me fg-button ui-button ui-state-default ui-state-disabled">1</span>
    <span class="target_me fg-button ui-button ui-state-default">2</span>
</span>

But when I put the click event on each number and call

alert($(this).parent().html())

It renders the entire code above, rather than just the inital span. This renders just the page number "2" or "1".

alert($(this).html())

Anyone have any idea why this is happening?

Thanks!

I don't get it. You're asking the parent html, so you have the parent html. Can you be a little more precise in your question ? Maybe with the code attaching the event handlers ? — Denys Séguret, Sep 28 '12 at 15:32
Look at this question, I think that you want to achieve similar thing. http://stackoverflow.com/questions/12612709/get-html-element-as-a-string — Igor Shastin, Sep 28 '12 at 15:35
Sorry for not being as specific. I'm trying to get the span around the number -- ie, -- instead of the container. — streetlight, Sep 28 '12 at 15:37
I still don't get it : wasn't my answer exactly what you were looking for ? — Denys Séguret, Sep 28 '12 at 15:57

score 3 · Accepted Answer · answered Sep 28 '12 at 15:34

3

You're getting exactly what you asked for. If you only want the tag for this, then try:

alert( $(this).wrap('<div>').parent().html() );
$(this).unwrap();

A shorter technique involves cloning outside of the DOM:

alert( $('<div>').append($(this).clone()).html() );

answered Sep 28 '12 at 15:34

Blazemonger

90,923
26
142
180

HEheheh. That's a clever trick. You can also do `alert($(this)[0].outerHTML);`, but of course not all browsers support outerHTML, your trick is more compatible with old browsers. – aquinas Sep 28 '12 at 15:38
This is great. Is there anyway I could make that a variable so I can use it in if else statements? var outerHTML = $('
').append($(this).clone()).html(); if ($(outerHTML).hasClass('ui-state-disabled')) { do something }
– streetlight Sep 28 '12 at 15:45
Well, yes. `.html()` outputs a string, which you can assign to a variable and use however you wish. – Blazemonger Sep 28 '12 at 15:46
@aquinas and thank you for all your help (and if these are beginners questions!)! – streetlight Sep 28 '12 at 15:46
@Blazemonger I guess I'm just having an error trying to run the .hasClass variable on the javascript variable. – streetlight Sep 28 '12 at 15:49

raidenace · Answer 2 · 2012-09-28T15:41:45.947

This is expected behavior. When you use $(this).parent().html() it gets the FIRST span in your code.(the one in CAPITAL case below)

<SPAN>
    <span class="target_me fg-button ui-button ui-state-default ui-state-disabled">1</span>
    <span class="target_me fg-button ui-button ui-state-default">2</span>
</SPAN>

and naturally it will print all the HTML inside it..

when you call $(this).html() it gets the SPAN that you clicked ON. In which case you get 1 or 2 based on which number you clicked..

score 1 · Answer 3 · answered Sep 28 '12 at 15:38

1

I think you want this :

alert(this.outerHTML)

answered Sep 28 '12 at 15:38

Denys Séguret

372,613
87
782
758

score 0 · Answer 4 · answered Sep 28 '12 at 15:34

0

alert($(this).parent().html())

This is going to go to the <span> tag and alert the HTML inside of it.

$(this).html() when an item is clicked on will render the HTML inside the individual span, so 1 and 2, like intended.

What are you trying to achieve?

answered Sep 28 '12 at 15:34

Chris Dixon

9,147
5
36
68

Problems with targeting containing spans in jQuery

4 Answers4