Question

Using javascript I’m looping through my H3 elements like this:

$('h3').each(function(){ });

I’m then generating an anchor for that tag formatted like this: “section-x” where x increments for each H3 on the page. The problem I have is that I’d like the first letter of the header to be an anchor link, like this:

*H*eading

.. where H is underlined, representing a link. I can format the anchors however I don’t know how to wrap a hyperlink tag around the first letter in each heading. Some help would be greatly appreciated.

Regards,
kvanberendonck

Answer 1

Let’s throw some plain javascript into the mix:

$('h3').html(function(i){
    var self = $(this)
      , html = self.html()

    return html[0].anchor('section-'+i) + html.substring(1)
})

• html (and most other setter functions) accepts a function as an argument and uses the return value for each element
• "string".link(target) creates the code <a href="#target">string</a>. A nice vintage useful method

edit: switched from .link to .anchor. Anchors are deprecated though, you should start using IDs for that:

$('h3').html(function(i){
    var self = $(this)
      , text = self.text()

    // give the H3 an id and link to it
    // ideally the headers should already have an id
    this.id = 'section-'+i
    return text[0].link('#section-'+i) + text.substring(1)
})