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();
});