jQuery this.html() returns undefined

Question

I'm reformatting some really bad HTML using jQuery. I need to splice sibling <font> elements together. I tried this code:

$('font+font').each(function() {
    this.html().appendTo( this.prev() );
    this.remove();
});

but it gave me this error: TypeError: 'undefined' is not a function (evaluating 'this.html()')

---

Here's a sample of the HTML:

<font>This fragment </font><font>is actually one element.</font>

---

Update

I updated my code with $(this), but it still isn't working. When I run this code

$('font+font').each(function() {
    $(this).html().appendTo( $(this).prev() );
    $(this).remove();
});

I get this error: TypeError: 'undefined' is not a function (evaluating '$(this).html().appendTo( $(this).prev() )')

Answer 1

1. this has to be wrapped in a jQuery object, before you can use jQuery methods on it.
2. .html() returns a string. You cannot use jQuery methods on a string without wrapping. Use $this.prev().append( $this.html() ) instead.
3. When using $(this) more than once, it's wise to store $(this) in a temporary variable. It's the convention to prefix jQuery objects with a dollar sign.

Code:

$('font+font').each(function() {
    var $this = $(this);
    $this.prev().append( $this.html() );
    $this.remove();
});

Answer 2

When you use an each statement, it returns this as a DOM element, not a jQuery object. .html() must be called on a jQuery object. So the first part of your fix is to convert this into a jQuery element with the $ symbol.

$(this).html(); //don't use this.html();

The second problem is that html() returns a string. You can't call AppendTo() on a string, only a jQuery object. Since you are working with .html() I'll assume that you want the string contents and not the full contents. If that were the case, Rob's answer is more appropriate.

this.textContent = $(this).prev().html() + this.textContent; // prepend siblings content

The final code ends up looking like this:

$('font+font').each(function() {
    this.textContent = $(this).prev().html() + this.textContent;
    $(this).prev().remove();
});

http://jsfiddle.net/b6vLL37k/1

Answer 3

You need to use $(this) not this

Answer 4

You need to use $(this) for jQuery to help you.