Question

I have a page that looks like this:

<div class="post">
     <h1>Foo Bar</h1>
</div>

I want to add post number through javascript.

<div class="post">
     <h1>1. Foo</h1>
</div>

<div class="post">
     <h1>2. Bar</h1>
</div>

I want to do this usign jQuery, and I supposed I could loop through each post and just add a count using prepend, doing something like this:

$('.post h1').each( function(num) { 
    this.prepend(num+' .'); 
});

The error I am getting is:

**Object #<HTMLHeadingElement> has no method 'prepend'**

I was wondering if anyone can take a look at the code and tell me where I’m going wrong?

Answer 1

In the callback, this is a DOM element, not a jQuery object.

Note that the index is zero based, so you should add one to it:

$('.post h1').each( function(num) { 
  $(this).prepend((num + 1) + ' .'); 
});