CODEWITHSUNDEEP
javascriptjquerythis
Brandon Lebedev
Brandon Lebedev

Reputation: 2797

jQuery this.html() returns undefined

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() )')

Upvotes: 8

Views: 38499

Answers (5)

mrtsherman
mrtsherman

Reputation: 39872

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

Upvotes: 9

Rob W
Rob W

Reputation: 348992

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

Upvotes: 18

osahyoun
osahyoun

Reputation: 5231

I wasn't able to fix your code. How about something like this:

 var text = '';
 $('font').each(function() {
   text += $(this).text();
 });
 console.log($('<p />').text(text));

Upvotes: 0

streetlogics
streetlogics

Reputation: 4730

You need to use $(this) not this

Upvotes: 4

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

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

Upvotes: 2

Related Questions