dynamically add a name anchor tag within dynamic content page

Question

I have a page that lists over 100 items and I need to dynamically add a name="" tags to the beginning of each new section of items that starts with the next alphabet.

For example:

<a name="a"></a>
<h1>Amazon River</h1>

<h1>Arrow Heads</h1>

<a name="b"></a>
<h1>Bear Claws</h1>

<h1>Bee Traps</h1>

<h1>Dodge Ball</h1>

<a name="f"></a>
<h1>Football Players</h1>

<h1>Fig Newtons</h1>

....

<a name="y"></a>
<h1>Yorktown</h1>

<h1>Yikes</h1>

<a name="z"></a>
<h1>Zebra</h1>

<h1>Zoo Mobile</h1>

I am only familiar w/ php, somewhat familiar w/ javascript, not sure what one it would take to accomplish this.

I will type out the "code" in theory, so you have an idea of what I want to accomplish

$letter = range(a-z);

if($title == first_letter_character($letter)) {
   print '<a name="'.$letter.'"></a>';
   $letter++; // goes to next letter in range
}

Also, there may be some letters that may not have an item.

Any help is appreciated.

Answer 1

It's a hard call - the <a name="D"></a> doesn't add a whole lot semantically to the document, so I'd be tempted to accomplish it in Javascript and keep the base markup clean. However, the resulting functionality yoursite.com/directory#D should function without JS, so using JS to enable it seems like a poor option. In the end, I'd include the tags in the markup via PHP, which is my default when in doubt.

I assume you've got something like this, printing out your items

<?php
$items = array(......); // populated via database?

foreach ($items as $item) {
  echo '<a href="<?= $item->url ?>"><?= htmlentities($item->name) ?></a>
}
?>

I would make the following modifications

<?php
$items = array(......); // populated via database?

$last_letter = 0;

foreach ($items as $item) {
  $letter = strtoupper($item->name[0]); // capitalized first letter
  if ($letter != $last_letter) {
    // not the same letter as last item
    echo '<a name="', $letter, '"></a>'; // <a name="A"></a>
    $last_letter = $letter;
  }

  echo '<a href="', $item->url, '">', htmlentities($item->name), '</a>';
}
?>

Answer 2

It's definitely better to output such things in PHP while the list is being generated. That way it's guaranteed to be present and available client-side. Javascript insertion would work, but if the client's got that disabled, you can't work around that.

That being said, here's how you could do it in Javascript, using mootools (jquery would be constructed similarly). Assuming the h1 tags are the only ones on the page that we have to do the 'a' insertion on, you'd do:

var lastletter = null, firstletter, a;
$$('h1').each(function(el) {
    firstletter = el.get('text').substr(0,1).toUpperCase();
    if (firstletter != lastletter) {
        a = new Element('a', { 'name': firstletter }).inject(el, 'before');
    }
});

In pseudo-code: grab all h1 elements. loop over the results and extract an upper-cased copy of the first letter of each h1's text content. If this letter is not the same as the last letter, then create an 'a' element, set its name parameter, and insert it into the dom immediately before the h1 we're examining.