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>';
}
?>